@media screen and (min-width:1201px) { 
#gndTopbanner {position: relative; height: 500px; background-image: url(../img/gnbtopbanner3.jpg);
    background-position: center ; background-size: cover; margin-bottom: 150px; margin-top: -100px; background-color: 0,0,0,0,0.5;}
#gndTopbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
#gndTopbanner .top_text h2{font-size: 54px; font-weight: bold; margin-bottom: 40px; color: #FFF;}
#gndTopbanner .top_text p{font-size: 18px; color: #FFF;}

#history{position: relative; width: 96%; max-width: 1440px; margin: 0 auto}
.nsdsimg{position: relative; margin-top: 60px; display: flex; justify-content: space-between; width: 1440px;}
.title2{position: relative; width: 60%;; margin: 0 auto;}
.title2 h4{font-size: 32px; font-weight: 400; margin-bottom: 8px;}
.title2 p:nth-of-type(1){font-size: 40px; font-weight: 500; margin-bottom: 16px;}
.title2 p:nth-of-type(2){color: #333;} 
.gndimg {position: relative; margin-top: 80px; width: 100%; margin-bottom: 50px;}
.gndimg img{width: 100%;}
.gnd1{width: 100%; opacity: 0; left: -200px; position: relative;}
.history_text h4{position: sticky; right: 0; top: 100px; font-size: 68px; font-weight: 700; color: #000; margin-left: 150px;  }
.history_text h4 img {    width: 250px; height: auto; position: relative; left: -38px; top: 10px;}


.history_list{position: relative; margin-left: 500px;}
.history_list::before{content: ""; position: absolute; width: 1px ; height: 100%; background-color: #000; left: -10px; top: 0;}
.history_list>li{position: relative; line-height: 1.6em; margin-bottom: 400px;  padding: 10px;}                   
.history_list>li .mon_text{font-size: 25px; font-weight:700; margin-left: 20px; }
.history_list>li h5 {font-weight: 500; font-size: 18px; margin-left: 20px; color: #000; margin-bottom: 4px;}
.history_list>li p{font-size: 16px; line-height: 2em; margin-left: 20px; color: #666; width: 43%;}
.history_list>li.year_text::before{content: ""; display: block; position: absolute; left: -15px; top: 0; width: 12px; height: 12px; background-color: #79B928; border-radius: 50%;}
.history_img{position: absolute; left:500px; top: 0; width: 220px; height: 220px; box-shadow: 3px 3px 5px rgba(0,0,0,0.5); cursor: pointer; }
.history_img img{width: 100%;}
.history_img img:hover{transform: scale(1.1); transition-duration: 0.5s;  box-shadow: 3px 3px 5px rgba(0,0,0,0.5); }




}






@media screen and (min-width:901px) and (max-width:1200px) {
    #gndTopbanner {position: relative; height: 500px; background-image: url(../img/gnbtopbanner3.jpg);
        background-position: center ; background-size: cover; margin-bottom: 150px; margin-top: -100px; background-color: 0,0,0,0,0.5;}
    #gndTopbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
    #gndTopbanner .top_text h2{font-size: 54px; font-weight: bold; margin-bottom: 40px; color: #FFF;}
    #gndTopbanner .top_text p{font-size: 18px; color: #FFF;}
    
    #history{position: relative; width: 96%; max-width: 1440px; margin: 0 auto}
    .nsdsimg{position: relative; margin-top: 60px; display: flex; justify-content: space-between; width: 1440px;}
    .title2{position: relative; width: 90%;margin: 0 auto;}
    .title2 h4{font-size: 32px; font-weight: 400; margin-bottom: 8px;}
    .title2 p:nth-of-type(1){font-size: 40px; font-weight: 500; margin-bottom: 16px;}
    .title2 p:nth-of-type(2){color: #333;} 
    .gndimg {position: relative; margin-top: 80px; width: 100%; margin-bottom: 50px;}
    .gndimg img{width: 100%;}
    .gnd1{width: 100%; opacity: 0; left: -200px; position: relative;}
    .history_text h4{position: sticky; right: 0; top: 100px; font-size: 60px; font-weight: 700; color: #000; margin-left: 30px;}
    .history_text h4 img {    width: 200px; height: auto; position: relative; left: -30px; top: 10px;}
    
    
    .history_list{position: relative; margin-left: 230px;}
    .history_list::before{content: ""; position: absolute; width: 1px ; height: 100%; background-color: #000; left: -10px; top: 0;}
    .history_list>li{position: relative; line-height: 1.6em; margin-bottom: 400px;  padding: 10px;}                   
    .history_list>li .mon_text{font-size: 25px; font-weight:700; margin-left: 20px; }
    .history_list>li h5 {font-weight: 500; font-size: 18px; margin-left: 20px; color: #000; margin-bottom: 4px;}
    .history_list>li p{font-size: 16px; line-height: 2em; margin-left: 20px; color: #666; width: 43%;}
    .history_list>li.year_text::before{content: ""; display: block; position: absolute; left: -15px; top: 0; width: 12px; height: 12px; background-color: #79B928; border-radius: 50%;}
    .history_img{position: absolute; left:500px; top: 0; width: 220px; height: 220px; box-shadow: 3px 3px 5px rgba(0,0,0,0.5); cursor: pointer; }
    .history_img img{width: 100%;}
    .history_img img:hover{transform: scale(1.1); transition-duration: 0.5s;  box-shadow: 3px 3px 5px rgba(0,0,0,0.5); }
}







@media screen and (min-width:601px) and (max-width:900px) {
    #gndTopbanner {position: relative; height: 400px; background-image: url(../img/gnbtopbanner3.jpg);
        background-position: center ; background-size: cover; margin-bottom: 150px; margin-top: -100px; background-color: 0,0,0,0,0.5;}
    #gndTopbanner .top_text{position: absolute; top: 55%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
    #gndTopbanner .top_text h2{font-size: 50px; font-weight: bold; margin-bottom: 40px; color: #FFF;}
    #gndTopbanner .top_text p{font-size: 18px; color: #FFF; width: 100%;} 
    
    #history{position: relative; width: 96%; max-width: 1440px; margin: 0 auto}
    .nsdsimg{position: relative; margin-top: 60px; display: flex; justify-content: space-between; width: 1440px;}
    .title2{position: relative; width: 85%; margin: 0 auto;}
    .title2 h4{font-size: 28px; font-weight: 400; margin-bottom: 8px;}
    .title2 p:nth-of-type(1){font-size: 36px; font-weight: 500; margin-bottom: 16px;}
    .title2 p:nth-of-type(2){color: #333; font-size: 16px;}
    .gndimg {position: relative; margin-top: 80px; width: 100%; margin-bottom: 50px;}
    .gndimg img{width: 100%;}
    .gnd1{width: 100%; opacity: 0; left: -200px; position: relative;}
    .history_text h4{position: sticky; right: 0; top: 100px; font-size: 60px; font-weight: 700; color: #000; margin-left: 30px;}
    .history_text h4 img {    width: 200px; height: auto; position: relative; left: -30px; top: 10px;}
    
    
    .history_list{position: relative; margin-left: 230px;}
    .history_list::before{content: ""; position: absolute; width: 1px ; height: 100%; background-color: #000; left: -10px; top: 0;}
    .history_list>li{position: relative; line-height: 1.6em; margin-bottom: 400px;  padding: 10px;}                   
    .history_list>li .mon_text{font-size: 25px; font-weight:700; margin-left: 20px; }
    .history_list>li h5 {font-weight: 500; font-size: 18px; margin-left: 20px; color: #000; margin-bottom: 4px;}
    .history_list>li p{font-size: 16px; line-height: 2em; margin-left: 20px; color: #666; width: 80%;}
    .history_list>li.year_text::before{content: ""; display: block; position: absolute; left: -15px; top: 0; width: 12px; height: 12px; background-color: #79B928; border-radius: 50%;}
    .history_img{position: absolute; left:500px; top: 0; width: 220px; height: 220px; box-shadow: 3px 3px 5px rgba(0,0,0,0.5); cursor: pointer;  display: none;}
    .history_img img{width: 100%;}
    .history_img img:hover{transform: scale(1.1); transition-duration: 0.5s;  box-shadow: 3px 3px 5px rgba(0,0,0,0.5); }

}





@media screen and (max-width:600px) {
    #gndTopbanner {position: relative; height: 350px; background-image: url(../img/gnbtopbanner3.jpg);
        background-position: center ; background-size: cover; margin-bottom: 100px; margin-top: -100px; background-color: 0,0,0,0,0.5;}
    #gndTopbanner .top_text{position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
    #gndTopbanner .top_text h2{font-size: 30px; font-weight: bold; margin-bottom: 40px; color: #FFF;}
    #gndTopbanner .top_text p{font-size: 15px; color: #FFF;}
    
    #history{position: relative; width: 96%; max-width: 1440px; margin: 0 auto}
    .nsdsimg{position: relative; margin-top: 60px; display: flex; justify-content: space-between; width: 1440px;}
    .title2{position: relative; width: 90%; margin: 0 auto;}
    .title2 h4{font-size: 24px; font-weight: 400; margin-bottom: 8px;}
    .title2 p:nth-of-type(1){font-size: 26px; font-weight: 500; margin-bottom: 16px;}
    .title2 p:nth-of-type(2){color: #333; font-size: 16px;} 
    .gndimg {position: relative; margin-top: 80px; width: 100%; margin-bottom: 50px;}
    .gndimg img{width: 100%;}
    .gnd1{width: 100%; opacity: 0; left: -200px; position: relative;}
    .history_text h4{position: sticky; right: 0; top: 100px; font-size: 60px; font-weight: 700; color: #000; margin-left: 30px;}
    .history_text h4 img {    width: 200px; height: auto; position: relative; left: -30px; top: 10px;}
    
    
    .history_list{position: relative; margin-left: 230px;}
    .history_list::before{content: ""; position: absolute; width: 1px ; height: 100%; background-color: #000; left: -10px; top: 0;}
    .history_list>li{position: relative; line-height: 1.6em; margin-bottom: 400px;  padding: 10px;}                   
    .history_list>li .mon_text{font-size: 25px; font-weight:700; margin-left: 20px; }
    .history_list>li h5 {font-weight: 500; font-size: 18px; margin-left: 20px; color: #000; margin-bottom: 4px;}
    .history_list>li p{font-size: 14px; line-height: 2em; margin-left: 20px; color: #666; width: 80%;}
    .history_list>li.year_text::before{content: ""; display: block; position: absolute; left: -15px; top: 0; width: 12px; height: 12px; background-color: #79B928; border-radius: 50%;}
    .history_img{position: absolute; left:500px; top: 0; width: 220px; height: 220px; box-shadow: 3px 3px 5px rgba(0,0,0,0.5); cursor: pointer;  display: none;}
    .history_img img{width: 100%;}
    .history_img img:hover{transform: scale(1.1); transition-duration: 0.5s;  box-shadow: 3px 3px 5px rgba(0,0,0,0.5); }
    
}