section{overflow: hidden;}

/*pc*/
/* @media screen and (min-width:1501px){ */
#topBanner{position: relative; overflow: hidden; height: 100vh;}
#topBanner .top_img{position: relative; display: flex; width: 200%; opacity: 0.5;}
#topBanner .top_img li{width: 50%; height: 100vh; background-position: center; background-size: cover;}
#topBanner .top_img li.top0{background-image: url(../img/top_main0.jpg);}
#topBanner .top_img li.top1{background-image: url(../img/top_main1.jpg);}
#topBanner .top_text{opacity: 0;}
#topBanner .top_text li{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none;}
#topBanner .top_text li:first-child{display: block}
#topBanner .top_text li h2{font-size: 2.5vw; text-align: center; color: #FFF; position: relative; transition-duration: 0.5s; }
/* .top_banner_inner{position: absolute; width:90%; max-width:1620px; left: 50%; transform: translateX(-50%);} */
#topBanner .top_play{position: absolute; right: 4%; bottom: 55px; width: 50px; height: 50px; background: none;  border: none; cursor: pointer; opacity: 0;}
#topBanner .scroll_wrap{position: absolute; top: 130px; left: 4%; overflow: hidden; opacity: 0;}
#topBanner .scroll_wrap .scroll_box{position: relative; width: 45px; height: 600px; bottom: 0; animation: scrbar 1.5s ease-out  ;
animation-iteration-count:infinite; padding: 20px 0;}
#topBanner .scroll_wrap .scroll_box .long{position: absolute; height: 500px; width: 2px; background-color: #fff; top: 10px; left: 50%; transform: translateX(-50%); border-radius: 5px;}
#topBanner .scroll_wrap .scroll_box .short{ position: absolute; width: 2px; height: 40px; background-color: #fff; left:15px; bottom: 130px; transform: rotate(-18deg); border-radius: 5px;}
#topBanner .scroll_wrap p{position: absolute; top: 0; right: 0; text-align: center; color: #fff;}
@keyframes scrbar{
    0%{top:-5px;}
    50%{top:5px;}
    100%{top:-5px;}
}
#topBanner .progress_bar{position: absolute; bottom:80px; left: 50%; transform: translateX(-50%); width: calc(90% - 130px);  height: 2px; background-color: #fff; border-radius:5px; opacity: 0;}
#topBanner .progress_bar .progress_bar_inner{position: absolute; height: 2px; background-color: #049880; width: 0;}

/*business start*/
#business{position: relative; background-color: #eee; height: 100vh;overflow: hidden; }
#business h2{position: relative; padding-top: 100px; width:90%; max-width:1620px; margin: 0 auto; margin-bottom: 50px; opacity: 0;}
.business_inner{position: relative; height: 100vh; }
.business_inner .business_info{position: absolute; width:90%; max-width:1620px; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 100%;}

.business_inner .info_wrap{position: absolute; width:30%; height: 334px; right: 0; bottom: 50px;  background-color:#FFF;  padding: 40px ; z-index: 1; box-sizing: border-box; border-radius:35px 0 35px 0; overflow: hidden; box-shadow: 2px 2px 8px rgba(0,0,0,.2); opacity: 0;}
.business_inner .business_info .business_text{position: relative;}
.business_inner .business_info .business_text li{position: absolute;}
.business_inner .business_info .business_text li p{ color: #d9952a; font-size: 1.1em;}
.business_inner .business_info .business_text li h3{font-weight: 700; font-size: 1.4em; margin-top: 5px;}
.business_inner .business_info .business_text li h4{font-weight: 500; font-size: 1.1em; margin-top: 20px;}
.business_inner .business_info .business_text li a{font-weight: 500;margin-top: 20px; color: #666; position: relative; width: 85px;}
.business_inner .business_info .business_text li a::after{content: ''; background-image: url(../img/business_more_see.png); position: absolute; background-size: cover; background-position: center; right: 0; top: 1px; height: 20px; width: 20px;}
.business_inner .business_info .business_text li{display: none;}
.business_inner .business_info .business_text li:first-child{display: block;}

.business_inner .business_btn_wrap{position: absolute; width: 233px; height: 45px; display: flex; justify-content: space-between; align-items: center; bottom: 30px;}
.business_inner .business_btn_wrap .business_btn{width: 45px; height: 45px; border-radius: 50%; box-sizing: border-box; border: 1px solid #241E20;}
.business_inner .business_btn_wrap .business_prev{padding-left: 14px;}
.business_inner .business_btn_wrap .business_next{transform: rotate(180deg);
padding-left: 15px;}
.business_inner .business_btn_wrap .business_controls{position: relative; margin: 0 auto; width: 90px; height: 10px; display: flex; justify-content: space-between;}
.business_inner .business_btn_wrap .business_controls li{height: 100%; width: 10px; border-radius: 50%; background-color: #ddd;}
.business_inner .business_btn_wrap .business_controls li.select{background-color: #049880;}

.business_inner .business_list{ position: absolute;  display: flex; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 250%; opacity: 0;}
.business_inner .business_list li{  padding: 0 0.5%; box-sizing: border-box; width: 20%;}
.business_inner .business_list li img{width: 100%; border-radius: 30px;}
/*business end*/

/*development start*/
#development{position: relative; height: 100vh;}
.development_top{position: relative; padding-top: 100px; width:90%; max-width:1620px; margin: 0 auto; opacity: 0;}
.development_top>div{max-width:1261px; position: relative; left: 0; display: flex; justify-content: space-between;}
.development_top .development_topbtn_wrap{width: 400px; height: 50px; position: relative; display: flex; justify-content: space-between;}
.development_top .development_topbtn_wrap button{width: 130px; height: 100%; box-sizing: border-box; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2em; color: #fff; border-radius: 5px; cursor: pointer;}
.development_top .development_topbtn_wrap button.select{background-color: #d9952a; border: 1px solid #000; color: #000;}

.development_mid{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-40%); width:90%; max-width:1620px; display: flex; justify-content: space-between; align-items: center; opacity: 0;}
.development_mid .development_btn{cursor: pointer; width: 40px; height: 40px;}
.development_list_wrap{position: relative; overflow: hidden; box-shadow: 10px 10px 10px rgba(0,0,0,.2); margin-left: 90px; width:130%;}
.development_mid .development_list{width: 300%; display: flex;  position: relative;}
.development_mid .development_list li{width: 33.33%;}
.development_mid .development_list li img{width: 100%;}

.development_mid .ul_text{position: relative; padding:30px 70px 30px 90px;}
.development_mid .ul_text .development_text{position: relative; width: 480px; height: 300px;}
.development_mid .ul_text .development_text li:first-child{display: block;}
.development_mid .ul_text .development_text li{display: none; position: absolute; }
.development_mid .ul_text .development_text li h3{ font-weight: 500; font-size: 2.4em; color: #fff; text-shadow: 1px 2px 1px rgba(0,0,0,.3);}
.development_mid .ul_text .development_text li h3::after{content: ''; height: 2px; width: 50px; background-color: #fff; position: absolute; left: 0; top:80px; }
.development_mid .ul_text .development_text li h4{margin-top: 70px; color: #fff; font-size: 1.6em;}
.development_mid .ul_text .development_text li p{color: #fff; font-size: 1.3em; margin-top: 35px;}

.development_mid .ul_text>div{position: relative; margin-top: 146px; display: flex; align-items: center;}
.development_mid .ul_text>div p{color: #fff; font-size: 1.3em; font-weight: 500; margin-left: 10px;}

.development_bg{position: absolute; right: 0; top: 0; background-image: url(../img/development_bg.jpg); background-position: center; background-size: cover; height: 100vh; width: 50%; z-index: -10;}

/*graph start*/
#graph{position: relative; height: 100vh; display: flex;}
#graph .graph_wrap{position: relative; width: 50%; background-color: #eee; height: 100%; display: flex; align-items: center; justify-content: center;}
#graph .graph_wrap .graph_inner{position: relative; width: 533px;}
#graph .graph_wrap .graph_inner .graph_box_wrap{position: relative; display: flex; justify-content: space-between; border-bottom: 5px solid #241E20; align-items: flex-end;}
#graph .graph_wrap .graph_inner .graph_box_wrap li p{font-size: 0.9rem; font-weight: 500;}
#graph .graph_wrap .graph_inner .graph_box_wrap li p span{font-weight: 500; font-size:1.5em; text-align: center; }

#graph .graph_wrap .graph_inner .graph_box_wrap li .graph_box{width: 115px; border-radius: 60px 60px 0 0; margin-top: 40px; position: relative;}
#graph .graph_wrap .graph_inner .graph_box_wrap li:nth-child(1) .graph_box{height: 0px; background-color: #049880;}
#graph .graph_wrap .graph_inner .graph_box_wrap li:nth-child(2) .graph_box{height: 0px; background-color: #D9952A;}
#graph .graph_wrap .graph_inner .graph_box_wrap li:nth-child(3) .graph_box{height: 0px; background-color: #049880;}
#graph .graph_wrap .graph_inner .graph_box_wrap li:nth-child(4) .graph_box{height: 0px; background-color: #D9952A;}

#graph .graph_wrap .graph_inner .year{position: relative; display: flex; justify-content:space-between; width: 478px; margin: 0 auto; margin-top: 30px;}
#graph .graph_wrap .graph_inner .year li p{font-weight: 500; font-size: 1.8em;}

#graph .graph_wrap .graph_inner .Percentage{position: relative; width: 390px; display: flex; justify-content: space-between; margin: 0 auto; margin-top: 40px;}
#graph .graph_wrap .graph_inner .Percentage li{height: 100px; width: 110px; border-radius: 20px; background-color: #D9952A; display: flex; justify-content: center; align-items: center; font-size: 1.3em; font-weight: 700;}
#graph .graph_wrap .graph_inner .Percentage li:nth-child(2){background-color: #049880;}
#graph .graph_wrap .graph_inner .Percentage li:nth-child(2)::before{content: ''; position: absolute; background-image: url(../img/graph_yellow_allow.png); background-position: center; background-size: contain; background-repeat: no-repeat; left:120px; top: 38px; width: 13px; height: 22px;}
#graph .graph_wrap .graph_inner .Percentage li:nth-child(2)::after{content: ''; position: absolute; background-image: url(../img/graph_green_allow.png); background-position: center; background-size: contain; background-repeat: no-repeat; right:117px; top: 38px; width: 13px; height: 22px;}

#graph .graph_text_wrap{position: relative; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#graph .graph_text_wrap h2{position: relative; opacity: 0;}
#graph .graph_text_wrap p{text-align: center; font-size: 1.6em; width: 80%; margin-top: 200px; opacity: 0;}
#graph .graph_text_wrap p span{font-weight: 700; font-size: 1.4rem;}
/*graph end*/

/*mainEsg start*/
#mainEsg{position: relative; height: 100vh; background-image: url(../img/esg_main_bg.jpg); background-position: center; background-size: cover;}
#mainEsg h2{text-align: center; padding-top: 100px; position: relative; color: #fff;}
#mainEsg>p{text-align: center; position: relative; color: #fff; font-size: 1.6em; margin-top: 30px;}

#mainEsg ul{position: absolute; width:90%; max-width:1620px; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; justify-content: space-between; height: 100%;}
#mainEsg ul li{position: relative; height: 100%; width: 383px;}
#mainEsg ul li .line{ position: absolute; height: 0%; width: 1px; top: 0; left: 50%; transform: translateX(-50%); background-color: #dcdcdc;}
#mainEsg ul li .circle{position: absolute; width: 100%; height: 383px; border-radius: 50%; box-sizing: border-box; border: 1px solid #dcdcdc; left: 0; top: 50%; transform: translateY(-25%); opacity: 0;} 
#mainEsg ul li .circle img{position: absolute; top: 50%; left:15%; transform: translateY(-50%);}
#mainEsg ul li .circle div{width: 10px; height: 10px; border-radius: 50%; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#mainEsg ul li .circle div::after{content: ''; position: absolute; width: 36px; height: 36px; border-radius: 50%; background: rgb(255,255,255); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%); left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; transition-duration: .5s;}
#mainEsg ul li:hover .circle div::after{opacity: 1;}
#mainEsg ul li .circle p{color: #fff; position: absolute; top: 50%; right:10.5%; transform: translateY(-50%); font-size: 1.3em;} 
#mainEsg ul li:nth-child(2) .circle p{right:19%;}
/*mainEsg end*/

/*mainNews start*/
#mainNews{position: relative; height: 100vh; background-image: url(../img/notice_main_bg.jpg); background-position: center; background-size: cover; }
#mainNews .main_news_wrap{position: absolute; width:90%; max-width:1009px; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; justify-content: space-between;}
#mainNews .main_news_wrap .text{position: relative; top: 160px; opacity: 0;}
#mainNews .main_news_wrap .text h2{color: #fff;}
#mainNews .main_news_wrap .text p{color: #fff; padding-top: 32px; font-size: 1.6em;}
#mainNews .main_news_wrap .box{position: relative; display: flex; flex-direction: column; align-items:flex-end; opacity: 0; top: 100px;}
#mainNews .main_news_wrap .box .news_box{width: 300px; height: 300px; box-sizing: border-box; border: 1px solid #fff; padding: 30px; position: relative; transition-duration: .3s;}
#mainNews .main_news_wrap .box .news_box:hover{border-color: #049880;}
#mainNews .main_news_wrap .box .news_box:hover p{color: #049880;}
#mainNews .main_news_wrap .box .news_box p{text-align: right; color: #fff; font-size: 1.1em; transition-duration: .3s;}
#mainNews .main_news_wrap .box .news_box h3{color: #fff; font-weight: 500; font-size: 2.3em; margin-top: 82px;}
#mainNews .main_news_wrap .box .news_box h4{color: #fff; font-size: 1.2em; margin-top:15px;}
#mainNews .main_news_wrap .box div{position: relative; display: flex;}
#mainNews .main_news_wrap .box div .news_box:last-child{ border: none; background-color: rgba(225,225,225,.1); border: 1px solid rgba(0,0,0,0);border-top-width: 2px; border-left-width: 2px;}
#mainNews .main_news_wrap .box div .news_box:last-child:hover{border: 1px solid #049880; border-top-width: 2px; border-left-width: 2px;}

/*mainNews end*/
/* } */











/*topBanner*/
/*tablet 큰 가로*/
@media screen and (min-width:1001px) and (max-width:1500px){
#topBanner .top_text li h2{font-size:3vw; text-align: center; color: #FFF; position: relative; transition-duration: 0.5s; }
#topBanner .top_play{position: absolute; right: 4%; bottom: 60px; width: 45px; height: 45px; background: none;  border: none; cursor: pointer; opacity: 0;}
#topBanner .top_play img{width: 100%;}
}
/*tablet 세로*/
@media screen and (min-width:651px) and (max-width:1000px){
    #topBanner .top_text li h2{font-size:3.5vw; text-align: center; color: #FFF; position: relative; transition-duration: 0.5s; }
    #topBanner .top_play{position: absolute; right: 4%; bottom: 60px; width: 40px; height: 40px; background: none;  border: none; cursor: pointer; opacity: 0;}
    #topBanner .top_play img{width: 100%;}
    }
    /*mobile*/
@media screen and (max-width:650px){
    #topBanner .top_text li h2{font-size:20px; text-align: center; color: #FFF; position: relative; transition-duration: 0.5s; }
    #topBanner .top_play{position: absolute; right: 4%; bottom: 65px; width: 33px; height: 33px; background: none;  border: none; cursor: pointer; opacity: 0;}
    #topBanner .top_play img{width: 100%;}
    #topBanner .scroll_wrap p{position: absolute; top: 0; right: 0; text-align: center; color: #fff; font-size: 0.8em;}
    }









/*topBanner*/
/*tablet 큰 가로*/
@media screen and (min-width:901px) and (max-width : 1200px) {
#business{position: relative; background-color: #eee; height: 100vh;overflow: hidden; }
#business h2{position: relative; padding-top: 100px; width:90%; max-width:1620px; margin: 0 auto; margin-bottom: 50px; opacity: 0;}

.business_inner .info_wrap{position: absolute; width:40%; height: 334px; right: 0; bottom: 50px;  background-color:#FFF;  padding: 40px ; z-index: 1; box-sizing: border-box; border-radius:35px 0 35px 0; overflow: hidden; box-shadow: 2px 2px 8px rgba(0,0,0,.2); opacity: 0;}

.business_inner .business_list{ position: absolute;  display: flex; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 250%; opacity: 0;}
.business_inner .business_list li{  padding: 0 0.5%; box-sizing: border-box; width: 20%;}
.business_inner .business_list li img{width: 100%; border-radius: 30px;}
}


/*tablet 세로*/
@media screen and (min-width:551px) and (max-width : 900px) {
#business{position: relative; background-color: #eee; height: 100vh;overflow: hidden; }
#business h2{position: relative; padding-top: 100px; width:90%; max-width:1620px; margin: 0 auto; margin-bottom: 50px; opacity: 0;}

.business_inner .info_wrap{position: absolute; width:320px; height: 334px; left: 50%; top: 50%; transform: translate(-50%,-0%);  background-color:#FFF;  padding: 40px ; z-index: 1; box-sizing: border-box; border-radius:35px 0 35px 0; overflow: hidden; box-shadow: 2px 2px 8px rgba(0,0,0,.2); opacity: 0;}

.business_inner .business_list{ position: absolute;  display: flex; left: 50%; top: 160px; transform: translateX(-50%); width:360%; opacity: 0;}
.business_inner .business_list li{  padding: 0 0.5%; box-sizing: border-box; width: 20%;}
.business_inner .business_list li img{width: 100%; border-radius: 30px;}
}      


/*mobile*/
@media screen and (max-width : 550px) {
    #business{position: relative; background-color: #eee; height: 100vh;overflow: hidden; }
    #business h2{position: relative; padding-top: 100px; width:90%; max-width:1620px; margin: 0 auto; margin-bottom: 50px; opacity: 0;}
    
    .business_inner .info_wrap{position: absolute; width:320px; height: 334px; left: 50%; top: 50%; transform: translate(-50%,-0%);  background-color:#FFF;  padding: 40px ; z-index: 1; box-sizing: border-box; border-radius:35px 0 35px 0; overflow: hidden; box-shadow: 2px 2px 8px rgba(0,0,0,.2); opacity: 0;}
    
    .business_inner .business_list{ position: absolute;  display: flex; left: 50%; top: 160px; transform: translateX(-50%); width:600%; opacity: 0;}
    .business_inner .business_list li{  padding: 0 0.5%; box-sizing: border-box; width: 20%;}
    .business_inner .business_list li img{width: 100%; border-radius: 30px;}
    }   
    
    










/*development*/
/*tablet 큰 가로*/
@media screen and (min-width:1036px) and (max-width : 1380px) {
#development{position: relative; height: 100vh;}
.development_top{position: relative; padding-top: 80px; width:90%; max-width:1620px; margin: 0 auto; opacity: 0;}
.development_top>div{max-width:1261px; position: relative; left: 0; display: flex; justify-content: space-between;}
.development_top .development_topbtn_wrap{width: 400px; height: 50px; position: relative; display: flex; justify-content: space-between;}
.development_top .development_topbtn_wrap button{width: 130px; height: 100%; box-sizing: border-box; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2em; color: #fff; border-radius: 5px; cursor: pointer;}
.development_top .development_topbtn_wrap button.select{background-color: #d9952a; border: 1px solid #000; color: #000;}

.development_mid{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-40%); width:90%; max-width:1620px; display: flex; justify-content: space-between; align-items: center; opacity: 0;}
.development_mid .development_btn{cursor: pointer; width: 40px; height: 40px;}
.development_list_wrap{position: relative; overflow: hidden; box-shadow: 10px 10px 10px rgba(0,0,0,.2); margin-left: 90px; width:100%;}
.development_mid .development_list{width: 300%; display: flex;  position: relative;}
.development_mid .development_list li{width: 33.33%;}
.development_mid .development_list li img{width: 100%;}

.development_mid .ul_text{position: relative; padding:30px 70px 30px 90px;}
.development_mid .ul_text .development_text{position: relative; width: 244px; height: 185px;}
.development_mid .ul_text .development_text li:first-child{display: block;}
.development_mid .ul_text .development_text li{display: none; position: absolute; }
.development_mid .ul_text .development_text li h3{ font-weight: 500; font-size: 1.6em; color: #fff; text-shadow: 1px 2px 1px rgba(0,0,0,.3);}
.development_mid .ul_text .development_text li h3::after{content: ''; height: 2px; width: 30px; background-color: #fff; position: absolute; left: 0; top:60px; }
.development_mid .ul_text .development_text li h4{margin-top: 60px; color: #fff; font-size: 1.3em;}
.development_mid .ul_text .development_text li p{color: #fff; font-size: 1.1em; margin-top: 30px;}

.development_mid .ul_text>div{position: relative; margin-top: 146px; display: flex; align-items: center;}
.development_mid .ul_text>div>div{position: relative; width: 22px; height: 22px;}
.development_mid .ul_text>div>div img{width: 100%;}
.development_mid .ul_text>div p{color: #fff; font-size: .9em; font-weight: 500; margin-left: 10px;}

.development_bg{position: absolute; right: 0; top: 0; background-image: url(../img/development_bg.jpg); background-position: center; background-size: cover; height: 100vh; width: 50%; z-index: -10;}
}


/*tablet 세로*/
@media screen and (min-width:681px) and (max-width : 1035px) {
    #development{position: relative; height: 100vh;}
    .development_top{position: relative; padding-top: 60px; width:90%; max-width:1620px; margin: 0 auto; opacity: 0;}
    .development_top>div{max-width:1261px; position: relative; left: 0; display: flex; justify-content: space-between;}
    .development_top .development_topbtn_wrap{width: 310px; height: 40px; position: relative; display: flex; justify-content: space-between;}
    .development_top .development_topbtn_wrap button{width: 100px; height: 100%; box-sizing: border-box; border: 1px solid #000; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1em; color: #000; border-radius: 5px; cursor: pointer;}
    .development_top .development_topbtn_wrap button.select{background-color: #d9952a; border: 1px solid #000; color: #000;}
    
    .development_mid{position: absolute; width:90%; max-width:1620px; opacity: 0; display: flex; flex-direction: column; align-items: center; left: 50%; top:190px; transform: translateX(-50%);}
    .development_mid .development_btn{cursor: pointer; width: 40px; height: 40px; position: absolute; top: 207px;}
    .development_next{right: 1%;}
    .development_prev{left: 1%;}
    .development_list_wrap{position: relative; overflow: hidden; box-shadow: 6px 6px 6px rgba(0,0,0,.2); width:320px; margin: 0 auto;}
    .development_mid .development_list{width: 300%; display: flex;  position: relative;}
    .development_mid .development_list li{width: 33.33%;}
    .development_mid .development_list li img{width: 100%;}
    
    .development_mid .ul_text{position: relative; padding:30px 70px 30px 90px;}
    .development_mid .ul_text .development_text{position: relative; width: 244px; height: 185px; margin: 0 auto;}
    .development_mid .ul_text .development_text li:first-child{display: block;}
    .development_mid .ul_text .development_text li{display: none; position: absolute; }
    .development_mid .ul_text .development_text li h3{ font-weight: 500; font-size: 1.3em; color: #fff; text-shadow: 1px 2px 1px rgba(0,0,0,.3);}
    .development_mid .ul_text .development_text li h3::after{content: ''; height:1px; width: 30px; background-color: #fff; position: absolute; left: 0; top:50px; }
    .development_mid .ul_text .development_text li h4{margin-top: 60px; color: #fff; font-size: 1.1em;}
    .development_mid .ul_text .development_text li p{display: none;}
    
    .development_mid .ul_text>div{position: relative; margin-top: 10px; display: flex; align-items: center;}
    .development_mid .ul_text>div>div{position: relative; width: 22px; height: 22px;}
    .development_mid .ul_text>div>div img{width: 100%;}
    .development_mid .ul_text>div p{color: #fff; font-size: .9em; font-weight: 500; margin-left: 10px;}
    
    .development_bg{position: absolute; left: 0; top:50%; background-image: url(../img/development_bg.jpg); background-position: center; background-size: cover; height: 50%; width: 100%; z-index: -10;}
    }



    /*tablet 세로*/
@media screen and (min-width:1px) and (max-width : 680px) {
    #development{position: relative; height: 100vh;}
    .development_top{position: relative; padding-top: 60px; width:90%; max-width:1620px; margin: 0 auto; opacity: 0;}
    .development_top>div{max-width:1261px; position: relative; left: 0; display: flex; justify-content: space-between;}
    .development_top .development_topbtn_wrap{display: none;}
    
    .development_mid{position: absolute; width:90%; max-width:1620px; opacity: 0; display: flex; flex-direction: column; align-items: center; left: 50%; top:190px; transform: translateX(-50%);}
    .development_mid .development_btn{cursor: pointer; width:16px; height:30px; position: absolute; top: 240px;}
    .development_mid .development_btn img{width: 100%;}
    .development_next{right: 1%;}
    .development_prev{left: 1%;}
    .development_list_wrap{position: relative; overflow: hidden; box-shadow: 6px 6px 6px rgba(0,0,0,.2); width:320px; margin: 0 auto;}
    .development_mid .development_list{width: 300%; display: flex;  position: relative;}
    .development_mid .development_list li{width: 33.33%;}
    .development_mid .development_list li img{width: 100%;}
    
    .development_mid .ul_text{position: relative; padding:30px 70px 30px 90px;}
    .development_mid .ul_text .development_text{position: relative; width: 244px; height: 185px; margin: 0 auto;}
    .development_mid .ul_text .development_text li:first-child{display: block;}
    .development_mid .ul_text .development_text li{display: none; position: absolute; }
    .development_mid .ul_text .development_text li h3{ font-weight: 500; font-size: 1.3em; color: #fff; text-shadow: 1px 2px 1px rgba(0,0,0,.3);}
    .development_mid .ul_text .development_text li h3::after{content: ''; height:1px; width: 30px; background-color: #fff; position: absolute; left: 0; top:50px; }
    .development_mid .ul_text .development_text li h4{margin-top: 60px; color: #fff; font-size: 1.1em;}
    .development_mid .ul_text .development_text li p{display: none;}
    
    .development_mid .ul_text>div{position: relative; margin-top: 10px; display: flex; align-items: center;}
    .development_mid .ul_text>div>div{position: relative; width: 22px; height: 22px;}
    .development_mid .ul_text>div>div img{width: 100%;}
    .development_mid .ul_text>div p{color: #fff; font-size: .9em; font-weight: 500; margin-left: 10px;}
    
    .development_bg{position: absolute; left: 0; top:50%; background-image: url(../img/development_bg.jpg); background-position: center; background-size: cover; height: 50%; width: 100%; z-index: -10;}
    }










/*graph*/
/*tablet 큰 가로*/
@media screen and (min-width:781px) and (max-width : 1185px) {
    #graph{position: relative; height: 100vh; display: flex;}
#graph .graph_wrap{position: relative; width: 50%; background-color: #eee; height: 100%; display: flex; align-items: center; justify-content: center;}
#graph .graph_wrap .graph_inner{position: relative; width: 90%; margin: 0 auto;}
#graph .graph_wrap .graph_inner .graph_box_wrap{position: relative; display: flex; justify-content: space-between; border-bottom: 5px solid #241E20; align-items: flex-end;}
#graph .graph_wrap .graph_inner .graph_box_wrap li p{font-size: 0.8rem; font-weight: 500;}
#graph .graph_wrap .graph_inner .graph_box_wrap li p span{font-weight: 500; font-size:1.2em; text-align: center; }

#graph .graph_wrap .graph_inner .graph_box_wrap li .graph_box{width: 80px; border-radius: 60px 60px 0 0; margin-top: 40px; position: relative;}
#graph .graph_wrap .graph_inner .graph_box_wrap li:nth-child(1) .graph_box{height: 0px; background-color: #049880;}
#graph .graph_wrap .graph_inner .graph_box_wrap li:nth-child(2) .graph_box{height: 0px; background-color: #D9952A;}
#graph .graph_wrap .graph_inner .graph_box_wrap li:nth-child(3) .graph_box{height: 0px; background-color: #049880;}
#graph .graph_wrap .graph_inner .graph_box_wrap li:nth-child(4) .graph_box{height: 0px; background-color: #D9952A;}

#graph .graph_wrap .graph_inner .year{position: relative; display: flex; justify-content:space-between; width: 90%; margin: 0 auto; margin-top: 30px;}
#graph .graph_wrap .graph_inner .year li p{font-weight: 500; font-size: 1.5em;}

#graph .graph_wrap .graph_inner .Percentage{position: relative; width: 300px; display: flex; justify-content: space-between; margin: 0 auto; margin-top: 40px;}
#graph .graph_wrap .graph_inner .Percentage li{height: 80px; width: 90px; border-radius: 20px; background-color: #D9952A; display: flex; justify-content: center; align-items: center; font-size: 1.1em; font-weight: 700;}
#graph .graph_wrap .graph_inner .Percentage li:nth-child(2){background-color: #049880;}
#graph .graph_wrap .graph_inner .Percentage li:nth-child(2)::before{content: ''; position: absolute; background-image: url(../img/graph_yellow_allow.png); background-position: center; background-size: contain; background-repeat: no-repeat; left:93px; top: 30px; width: 10px; height: 19px;}
#graph .graph_wrap .graph_inner .Percentage li:nth-child(2)::after{content: ''; position: absolute; background-image: url(../img/graph_green_allow.png); background-position: center; background-size: contain; background-repeat: no-repeat; right:92px; top: 30px; width: 10px; height: 19px;}

#graph .graph_text_wrap{position: relative; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#graph .graph_text_wrap h2{position: relative; opacity: 0; top: 0;}
#graph .graph_text_wrap p{text-align: center; font-size: 1.3em; width: 80%; margin-top: 200px; opacity: 0;}
#graph .graph_text_wrap p span{font-weight: 700; font-size: 1.1rem;}
}



/*tablet 세로*/
@media screen and (max-width : 780px) {
    #graph{position: relative; height: 100vh; display: flex;}
#graph .graph_wrap{position: absolute; width:100%; background-color: #eee; height: 65%; display: flex; align-items: center; justify-content: center; top: 35%;}
#graph .graph_wrap .graph_inner{position: relative; width: 300px; margin: 0 auto;}
#graph .graph_wrap .graph_inner .graph_box_wrap{position: relative; display: flex; justify-content: space-between; border-bottom: 5px solid #241E20; align-items: flex-end;}
#graph .graph_wrap .graph_inner .graph_box_wrap li p{font-size: 0.8rem; font-weight: 500;}
#graph .graph_wrap .graph_inner .graph_box_wrap li p span{font-weight: 500; font-size:1.2em; text-align: center; }

#graph .graph_wrap .graph_inner .graph_box_wrap li .graph_box{width: 60px; border-radius: 60px 60px 0 0; margin-top: 40px; position: relative;}
#graph .graph_wrap .graph_inner .graph_box_wrap li:nth-child(1) .graph_box{height: 0px; background-color: #049880;}
#graph .graph_wrap .graph_inner .graph_box_wrap li:nth-child(2) .graph_box{height: 0px; background-color: #D9952A;}
#graph .graph_wrap .graph_inner .graph_box_wrap li:nth-child(3) .graph_box{height: 0px; background-color: #049880;}
#graph .graph_wrap .graph_inner .graph_box_wrap li:nth-child(4) .graph_box{height: 0px; background-color: #D9952A;}

#graph .graph_wrap .graph_inner .year{position: relative; display: flex; justify-content:space-between; width: 90%; margin: 0 auto; margin-top: 30px;}
#graph .graph_wrap .graph_inner .year li p{font-weight: 500; font-size: 1.3em;}

#graph .graph_wrap .graph_inner .Percentage{display: none;}

#graph .graph_text_wrap{position: absolute; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 35%; left: 0; top: 0;}
#graph .graph_text_wrap h2{position: relative; opacity: 0; top: 0px;}
#graph .graph_text_wrap p{text-align: center; font-size: 1.1em; width: 80%; margin-top: 100px; opacity: 0; position: relative;}
#graph .graph_text_wrap p span{font-weight: 700; font-size: 1rem;}
}













/*mainEsg*/
/*tablet 큰 가로*/
@media screen and (min-width:686px) and (max-width : 1290px) {
    #mainEsg{position: relative; height: 100vh; background-image: url(../img/esg_main_bg.jpg); background-position: center; background-size: cover;}
    #mainEsg h2{text-align: center; padding-top: 100px; position: relative; color: #fff;}
    #mainEsg>p{text-align: center; position: relative; color: #fff; font-size: 1.3em; margin-top: 30px;}

    #mainEsg ul{position: absolute; width:90%; max-width:1620px; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; justify-content: space-between; height: 100%;}
    #mainEsg ul li{position: relative; height: 100%; width: 200px;}
    #mainEsg ul li .line{ position: absolute; height: 0%; width: 1px; top: 0; left: 50%; transform: translateX(-50%); background-color: #dcdcdc;}
    #mainEsg ul li .circle{position: absolute; width: 100%; height: 200px; border-radius: 50%; box-sizing: border-box; border: 1px solid #dcdcdc; left: 0; top: 50%; transform: translateY(-25%); opacity: 0;} 
    #mainEsg ul li .circle img{position: absolute; top: 50%; left:18%; transform: translateY(-50%); width: 28px;}
    #mainEsg ul li .circle div{width: 5px; height: 5px; border-radius: 50%; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
    #mainEsg ul li .circle div::after{content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: rgb(255,255,255); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%); left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; transition-duration: .5s;}
    #mainEsg ul li:hover .circle div::after{opacity: 1;}
    #mainEsg ul li .circle p{color: #fff; position: absolute; top: 50%; right:4%; transform: translateY(-50%); font-size: 1em;} 
    #mainEsg ul li:nth-child(2) .circle p{right:15%;}
}



/*mobile*/
@media screen and (max-width : 685px) {
    #mainEsg{position: relative; height: 100vh; background-image: url(../img/esg_main_bg.jpg); background-position: center; background-size: cover;}
    #mainEsg h2{text-align: center; padding-top: 100px; position: relative; color: #fff;}
    #mainEsg>p{text-align: center; position: relative; color: #fff; font-size: 1.1em; margin-top: 0px; width: 90%; margin: 0 auto;}

    #mainEsg ul{position: absolute; width:90%; max-width:1620px; left: 50%; top: 50%; transform: translate(-50%,-30%); height:390px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}
    #mainEsg ul li{position: relative; height:130px; width: 100%;}
    #mainEsg ul li .line{ display: none; }
    #mainEsg ul li::after{content: ''; position: absolute; height: 1px; width: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #dcdcdc;}
    #mainEsg ul li .circle{position: absolute; width:130px; height: 130px; border-radius: 50%; box-sizing: border-box; border: 1px solid #dcdcdc; left: 5%; top: 50%; transform: translateY(-50%); opacity: 0;} 
    #mainEsg ul li .circle2{right: 5%; left: auto;} 
    #mainEsg ul li .circle img{position: absolute; top: 18%; left:50%; transform: translateX(-50%); width: 28px;}
    #mainEsg ul li .circle div{width: 5px; height: 5px; border-radius: 50%; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
    #mainEsg ul li .circle div::after{content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: rgb(255,255,255); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%); left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; transition-duration: .5s;}
    #mainEsg ul li:hover .circle div::after{opacity: 1;}
    #mainEsg ul li .circle p{color: #fff; position: absolute; top: 77px; left:50%; transform: translateX(-80%); font-size: 1em;} 
    #mainEsg ul li:nth-child(2) .circle p{transform: translateX(-50%);}
}













/*mainNews*/
/*tablet 큰 가로*/
@media screen and (min-width:641px) and (max-width : 1100px) {
    #mainNews{position: relative; height: 100vh; background-image: url(../img/notice_main_bg.jpg); background-position: center; background-size: cover; }
    #mainNews .main_news_wrap{position: absolute; width:90%; max-width:1009px; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column;}
    #mainNews .main_news_wrap .text{position: relative; top: 160px; opacity: 0;}
    #mainNews .main_news_wrap .text h2{color: #fff;}
    #mainNews .main_news_wrap .text p{color: #fff; padding-top: 32px; font-size: 1.3em;}
    #mainNews .main_news_wrap .box{position: relative; display: flex; flex-direction: column; align-items:flex-end; opacity: 0; top: 100px;}
    #mainNews .main_news_wrap .box .news_box{width:250px; height: 250px; box-sizing: border-box; border: 1px solid #fff; padding: 20px; position: relative; transition-duration: .3s;}
    #mainNews .main_news_wrap .box .news_box:hover{border-color: #049880;}
    #mainNews .main_news_wrap .box .news_box:hover p{color: #049880;}
    #mainNews .main_news_wrap .box .news_box p{text-align: right; color: #fff; font-size: 1.1em; transition-duration: .3s;}
    #mainNews .main_news_wrap .box .news_box h3{color: #fff; font-weight: 500; font-size: 2em; margin-top: 70px;}
    #mainNews .main_news_wrap .box .news_box h4{color: #fff; font-size: 1.1em; margin-top:20px;}
    #mainNews .main_news_wrap .box div{position: relative; display: flex;}
    #mainNews .main_news_wrap .box div .news_box:last-child{ border: none; background-color: rgba(225,225,225,.1); border: 1px solid rgba(0,0,0,0);border-top-width: 2px; border-left-width: 2px;}
    #mainNews .main_news_wrap .box div .news_box:last-child:hover{border: 1px solid #049880; border-top-width: 2px; border-left-width: 2px;}
}


/*tablet 세로*/
@media screen and (max-width :640px) {
    #mainNews{position: relative; height: 100vh; background-image: url(../img/notice_main_bg.jpg); background-position: center; background-size: cover; }
    #mainNews .main_news_wrap{position: absolute; width:90%; max-width:1009px; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; height: 100%;}
    #mainNews .main_news_wrap .text{position: relative; top: 160px; opacity: 0;}
    #mainNews .main_news_wrap .text h2{color: #fff;}
    #mainNews .main_news_wrap .text p{color: #fff; padding-top: 32px; font-size: 1.1em;}
    #mainNews .main_news_wrap .box{position: absolute; display: flex; flex-direction: column; align-items:flex-end; opacity: 0; top: 50%; left: 50%; transform: translate(-50%,-1%); margin-top: 250px;}
    #mainNews .main_news_wrap .box .news_box{width:160px; height: 160px; box-sizing: border-box; border: 1px solid #fff; padding: 15px; position: relative; transition-duration: .3s;}
    #mainNews .main_news_wrap .box .news_box:hover{border-color: #049880;}
    #mainNews .main_news_wrap .box .news_box:hover p{color: #049880;}
    #mainNews .main_news_wrap .box .news_box p{text-align: right; color: #fff; font-size: .9em; transition-duration: .3s;}
    #mainNews .main_news_wrap .box .news_box h3{color: #fff; font-weight: 500; font-size: 1.2em; margin-top: 30px;}
    #mainNews .main_news_wrap .box .news_box h4{color: #fff; font-size: .9em; margin-top:10px;}
    #mainNews .main_news_wrap .box div{position: relative; display: flex;}
    #mainNews .main_news_wrap .box div .news_box:last-child{ border: none; background-color: rgba(225,225,225,.1); border: 1px solid rgba(0,0,0,0);border-top-width: 2px; border-left-width: 2px;}
    #mainNews .main_news_wrap .box div .news_box:last-child:hover{border: 1px solid #049880; border-top-width: 2px; border-left-width: 2px;}
}