@media screen and (min-width:1201px) {
#banner{position: relative; width: 100%; height: 951px; overflow: hidden;}
#banner .banner img{position: absolute;  }
#banner .banner_text_wrap{position: absolute; left: 100px; top: 50%; transform: translateY(-50%); opacity: 0; margin-top: 100px; transition-duration: 0.5s;}
#banner .banner_text_wrap .banner_title{font-size: 6em; color: #ff6600; margin-bottom: 20px;}
#banner .banner_text_wrap .banner_text{font-size: 2.5em; font-weight: 700;}


#portfolio{position: relative; overflow: hidden; height: 100vh; padding: 50px 0; box-sizing: border-box;}
#portfolio .pf_wrap{position: relative;height: 100vh; }
#portfolio .pf_wrap .pf_img {position: absolute; left: -100px; bottom: 60px; opacity: 0;}
#portfolio .pf_wrap .pf_img img{width: 650px; }
#portfolio .pf_wrap .pf_text_wrap{position: absolute; width: 50%; left: 50%; top: 50%; transform:translateY(-50%); text-align: right;  padding-right: 100px; box-sizing: border-box;  margin-left: 100px;}
#portfolio .pf_wrap .pf_text_wrap .pf_text1{font-size: 6vw;}
#portfolio .pf_wrap .pf_text_wrap .pf_text2{font-size: 1.5vw; font-weight: 500; margin-right: 24px;}
#portfolio .pf_wrap .pf_text2_wrap{display: flex; position: relative; justify-content: end;}
#portfolio .pf_wrap .pf_text_wrap .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative; margin-top: 25px;}





#topBanner{position: relative; width: 100%; height: 951px; overflow: hidden;}
#topBanner .top_bg{opacity: 0; width: 100%;}
#topBanner .top_img li{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -45%);}
#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: 2vw; color: #FFF; 
position: relative; transition-duration: 0.5s; text-align: center;}
#topBanner .top_text li h2 span{color: #ff6600;}
#topBanner .top_text .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#topBanner .top_text li .top_more{width: 160px; height: 50px; display: block; background-color: rgba(255,255,255,0.3); color: #000; border: 1px solid #000; border-radius: 26px; text-align: center; line-height: 50px; font-size: 13px; 
position: relative; top: 100px; transition-duration: 0.5s;}

#topBanner .top_controls{position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex;}
#topBanner .top_controls li{width: 18px; height: 18px; background-color: #FFF; border: none; margin: 0 5px; cursor: pointer; border-radius: 10px; transition-duration: 0.5s;}
#topBanner .top_controls li.select{background-color: #ff6600; border: none; width:18px;}


#topBanner .top_btn{position: absolute;  top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;}
#topBanner .top_prev{left: 80px;}
#topBanner .top_next{right: 80px;}
#topBanner .top_play{position: absolute; right: 75px; bottom: 100px; width: 20px; height: 20px; background: none; background-image: url(img/play_btn_spirte.png); border: none; cursor: pointer;}



#hanwhaToday{position: relative; width: 100%; margin: 0 auto; 
background-image: url(../img/today_bg.png);  background-repeat: no-repeat;
background-position: center;
padding: 50px 0; box-sizing: border-box; overflow: hidden;}
#hanwhaToday .hanwha_inner{display: flex; flex-direction: column; text-align: center; justify-content: center; height: 951px;}
#hanwhaToday .hanwha_inner .title{font-size: 50px; }
#hanwhaToday .hanwha_inner .text{font-size: 25px; margin-bottom: 100px;}
#hanwhaToday .hanwha_inner .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#hanwhaToday .history_list{position: relative;width: 92%;max-width: 1300px;margin: 0 auto;display: flex;justify-content: space-between;}
#hanwhaToday .history_list li{width: 23%; text-align: center;}
#hanwhaToday .history_list li h3{font-size: 2.2vw; color: #FF6600; margin-bottom: 40px;}
#hanwhaToday .history_list li p{font-size: 2.5vw; font-weight: bold; color: #333; }
#hanwhaToday .history_list li p span{font-size: 4vw; }



#business{position: relative; overflow: hidden;padding: 50px 0; box-sizing: border-box;}
#business .business_wrap{position: relative;}
#business .business_wrap .title{font-size: 50px;text-align: center; margin-top: 70px;}
#business .business_wrap .text{font-size: 25px;text-align: center; margin-bottom: 50px; font-weight: 700;}
#business .business_wrap .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#business .accordion_wrap .accordion{display: flex;}
#business .accordion_wrap .accordion li{width: 25%; height:600px; background-position: center; background-size: cover; float: left;
transition-duration: 0.5s; transition-timing-function: linear; display: flex; justify-content: center; align-items: center; cursor: pointer;}
#business .accordion_wrap .accordion li:nth-child(1){background-image: url(../img/business.jpg);}
#business .accordion_wrap .accordion li:nth-child(2){background-image: url(../img/business1.jpg);}
#business .accordion_wrap .accordion li:nth-child(3){background-image: url(../img/business2.jpg);}
#business .accordion_wrap .accordion li:nth-child(4){background-image: url(../img/business3.jpg);}
#business .accordion_wrap .accordion .title{color: #FFF ; font-size: 3em; text-align: center; }





#news{position: relative; padding: 50px 0; box-sizing: border-box; overflow: hidden;}
#news .news_inner{position: relative; width: 85%; max-width: 1600px;margin: 95px auto;}
#news .news_inner .title{font-size: 50px;text-align: center;}
#news .news_inner .text{font-size: 25px;text-align: center; margin-bottom: 150px; font-weight: 700;}
#news .news_inner .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#news .news_inner .news_list{position: relative; margin: 0 auto; display: flex; justify-content: space-between; width: 100%; max-width: 1440px;}
#news .news_inner .news_list li{width: 21%; position: relative;top: 100px; opacity: 0;}
#news .news_inner .news_list li a{color: #111111; }
#news .news_inner .news_list li a::before{content: ""; width: 50px; height: 4px; background-color: #ff6600; position: absolute; top:-40%; left: 0; -webkit-transition: 0.5s;
    transition: 0.5s;}
#news .news_inner .news_list li a:hover::before {width: 150px;}
#news .news_inner .news_list .news_list_title{line-height: 1.5; font-size: 20px;}
#news .news_inner .news_list .news_list_data{margin-top: 60px; font-weight: 400;}
#news a .btn {position: relative; margin: 0 auto; border: 1px solid #111111; line-height: 70px; width: 160px; height: 70px; display: block; text-align: center;  margin-top: 100px; background-color: #FFF; box-sizing: border-box; cursor: pointer;}
#news a .btn:hover{border: 1px solid #ff6600; color: #ff6600;}
#news a .btn {font-size: 19px; font-weight: 700; color: #111111;}




/*pager*/
.pager{position: fixed; right: 50px; top: 50%; transform: translateY(-50%);}
.pager .pager_list{display: flex; flex-direction: column; align-items: flex-end;}
.pager .pager_list li{width: 12px; height: 12px; border-radius: 12px; background-color: none; border: 1px solid #ff6600; margin: 5px 0;  cursor: pointer;}
.pager .pager_list li.select{width: 12px; height: 12px; background-color: #ff6600;}
}









































@media screen and (min-width:801px) and (max-width:1200px){
#banner{position: relative; width: 100%; height: 951px; overflow: hidden;}
#banner .banner img{position: absolute;  }
#banner .banner_text_wrap{position: absolute; left: 100px; top: 50%; transform: translateY(-50%); opacity: 0; margin-top: 100px; transition-duration: 0.5s;}
#banner .banner_text_wrap .banner_title{font-size: 4em; color: #ff6600; margin-bottom: 20px;}
#banner .banner_text_wrap .banner_text{font-size: 2em; font-weight: 700;}


#portfolio{position: relative; overflow: hidden; height: 100vh; padding: 50px 0; box-sizing: border-box;}
#portfolio .pf_wrap{position: relative;height: 85vh; }
#portfolio .pf_wrap .pf_img {position: absolute; left: -100px; bottom: 60px; opacity: 0;}
#portfolio .pf_wrap .pf_img img{width: 430px; }
#portfolio .pf_wrap .pf_text_wrap{position: absolute; width: 50%; left: 50%; top: 50%; transform:translateY(-50%); text-align: right;  padding-right: 100px; box-sizing: border-box;  margin-left: 100px;}
#portfolio .pf_wrap .pf_text_wrap .pf_text1{font-size: 5vw;}
#portfolio .pf_wrap .pf_text_wrap .pf_text2{font-size: 2vw; font-weight: 500; margin-right: 24px;}
#portfolio .pf_wrap .pf_text2_wrap{display: flex; position: relative; justify-content: end;}
#portfolio .pf_wrap .pf_text_wrap .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative; margin-top: 25px;}





#topBanner{position: relative; width: 100%; height: 951px; overflow: hidden;}
#topBanner .top_bg{opacity: 0; width: 100%;}
#topBanner .top_img li{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -45%);}
#topBanner .top_text li{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80%;}
#topBanner .top_text li:first-child{display: block}
#topBanner .top_text li h2{font-size: 3vw; color: #FFF; 
position: relative; transition-duration: 0.5s; text-align: center; font-family: 'Noto Sans KR', sans-serif;}
#topBanner .top_text li h2 span{color: #ff6600;}
#topBanner .top_text .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#topBanner .top_text li .top_more{width: 160px; height: 50px; display: block; background-color: rgba(255,255,255,0.3); color: #000; border: 1px solid #000; border-radius: 26px; text-align: center; line-height: 50px; font-size: 13px; 
position: relative; top: 100px; transition-duration: 0.5s;}

#topBanner .top_controls{position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex;}
#topBanner .top_controls li{width: 18px; height: 18px; background-color: #FFF; border: none; margin: 0 5px; cursor: pointer; border-radius: 10px; transition-duration: 0.5s;}
#topBanner .top_controls li.select{background-color: #ff6600; border: none; width:18px;}


#topBanner .top_btn{position: absolute;  top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;}
#topBanner .top_prev{display: none;}
#topBanner .top_next{display: none;}
#topBanner .top_play{position: absolute; right: 75px; bottom: 100px; width: 20px; height: 20px; background: none; background-image: url(img/play_btn_spirte.png); border: none; cursor: pointer;}



#hanwhaToday{position: relative; width: 100%; margin: 0 auto; 
background-image: url(../img/today_bg.png);  background-repeat: no-repeat;
background-position: center;
padding: 50px 0; box-sizing: border-box; overflow: hidden;}
#hanwhaToday .hanwha_inner{display: flex; flex-direction: column; text-align: center; justify-content: center; height: 951px;}
#hanwhaToday .hanwha_inner .title{font-size: 45px; }
#hanwhaToday .hanwha_inner .text{font-size: 20px; margin-bottom: 100px;}
#hanwhaToday .hanwha_inner .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#hanwhaToday .history_list{position: relative;width: 92%;max-width: 1300px;margin: 0 auto;display: flex;justify-content: space-between;}
#hanwhaToday .history_list li{width: 23%; text-align: center;}
#hanwhaToday .history_list li h3{font-size: 2.5vw; color: #FF6600; margin-bottom: 40px;}
#hanwhaToday .history_list li p{font-size: 2vw; font-weight: bold; color: #333; }
#hanwhaToday .history_list li p span{font-size: 3vw; }



#business{position: relative; overflow: hidden;padding: 50px 0; box-sizing: border-box;}
#business .business_wrap{position: relative;}
#business .business_wrap .title{font-size: 45px;text-align: center; margin-top: 70px;}
#business .business_wrap .text{font-size: 20px;text-align: center; margin-bottom: 50px; font-weight: 700;}
#business .business_wrap .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#business .accordion_wrap .accordion{display: flex;}
#business .accordion_wrap .accordion li{width: 25%; height:600px; background-position: center; background-size: cover; float: left;
transition-duration: 0.5s; transition-timing-function: linear; display: flex; justify-content: center; align-items: center; cursor: pointer;}
#business .accordion_wrap .accordion li:nth-child(1){background-image: url(../img/business.jpg);}
#business .accordion_wrap .accordion li:nth-child(2){background-image: url(../img/business1.jpg);}
#business .accordion_wrap .accordion li:nth-child(3){background-image: url(../img/business2.jpg);}
#business .accordion_wrap .accordion li:nth-child(4){background-image: url(../img/business3.jpg);}
#business .accordion_wrap .accordion .title{color: #FFF ; font-size: 2.5em; text-align: center; }



#news{position: relative; padding: 50px 0; box-sizing: border-box; overflow: hidden;}
#news .news_inner{position: relative; width: 85%; max-width: 1600px;margin: 95px auto;}
#news .news_inner .title{font-size: 45px;text-align: center;}
#news .news_inner .text{font-size: 20px;text-align: center; margin-bottom: 150px; font-weight: 700;}
#news .news_inner .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#news .news_inner .news_list{position: relative; margin: 0 auto; display: flex; justify-content: space-between; width: 100%; max-width: 1440px;}
#news .news_inner .news_list li{width: 21%; position: relative;top: 100px; opacity: 0;}
#news .news_inner .news_list li a{color: #111111; }
#news .news_inner .news_list li a::before{content: ""; width: 50px; height: 4px; background-color: #ff6600; position: absolute; top:-40%; left: 0; -webkit-transition: 0.5s;
    transition: 0.5s;}
#news .news_inner .news_list li a:hover::before {width: 150px;}
#news .news_inner .news_list .news_list_title{line-height: 1.5; font-size: 18px;}
#news .news_inner .news_list .news_list_data{margin-top: 60px; font-weight: 400;}
#news a .btn {position: relative; margin: 0 auto; border: 1px solid #111111; line-height: 70px; width: 150px; height: 70px; display: block; text-align: center;  margin-top: 100px; background-color: #FFF; box-sizing: border-box; cursor: pointer;}
#news a .btn:hover{border: 1px solid #ff6600; color: #ff6600;}
#news a .btn {font-size: 18px; font-weight: 700; color: #111111;}




/*pager*/
.pager{position: fixed; right: 50px; top: 50%; transform: translateY(-50%);}
.pager .pager_list{display: flex; flex-direction: column; align-items: flex-end;}
.pager .pager_list li{width: 12px; height: 12px; border-radius: 12px; background-color: none; border: 1px solid #ff6600; margin: 5px 0;  cursor: pointer;}
.pager .pager_list li.select{width: 12px; height: 12px; background-color: #ff6600;}
}








































@media screen and (min-width:601px) and (max-width:800px) {
#banner{position: relative; width: 100%; height: 951px; overflow: hidden;}
#banner .banner img{position: absolute;  }
#banner .banner_text_wrap{position: absolute; left: 40px; top: 50%; transform: translateY(-50%); opacity: 0; margin-top: 100px; transition-duration: 0.5s;}
#banner .banner_text_wrap .banner_title{font-size: 3.5em; color: #ff6600; margin-bottom: 20px;}
#banner .banner_text_wrap .banner_text{font-size: 2em; font-weight: 700;}


#portfolio{position: relative; overflow: hidden; height: 100vh; padding: 50px 0; box-sizing: border-box;}
#portfolio .pf_wrap{position: relative;height: 85vh; }
#portfolio .pf_wrap .pf_img {position: absolute; left: -100px; bottom: 60px; opacity: 0;}
#portfolio .pf_wrap .pf_img img{width: 400px; }
#portfolio .pf_wrap .pf_text_wrap{position: absolute; width: 50%; left: 50%; top: 50%; transform:translateY(-50%); text-align: right;  padding-right: 100px; box-sizing: border-box;  margin-left: 100px;}
#portfolio .pf_wrap .pf_text_wrap .pf_text1{font-size: 5vw;}
#portfolio .pf_wrap .pf_text_wrap .pf_text2{font-size: 2vw; font-weight: 500; margin-right: 24px;}
#portfolio .pf_wrap .pf_text2_wrap{display: flex; position: relative; justify-content: end;}
#portfolio .pf_wrap .pf_text_wrap .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative; margin-top: 25px;}





#topBanner{position: relative; width: 100%; height: 951px; overflow: hidden;}
#topBanner .top_bg{opacity: 0; width: 100%;}
#topBanner .top_img li{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -45%);}
#topBanner .top_text li{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80%;}
#topBanner .top_text li:first-child{display: block}
#topBanner .top_text li h2{font-size: 3vw; color: #FFF; 
position: relative; transition-duration: 0.5s; text-align: center; font-family: 'Noto Sans KR', sans-serif;}
#topBanner .top_text li h2 span{color: #ff6600;}
#topBanner .top_text .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#topBanner .top_text li .top_more{width: 160px; height: 50px; display: block; background-color: rgba(255,255,255,0.3); color: #000; border: 1px solid #000; border-radius: 26px; text-align: center; line-height: 50px; font-size: 13px; 
position: relative; top: 100px; transition-duration: 0.5s;}

#topBanner .top_controls{position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex;}
#topBanner .top_controls li{width: 18px; height: 18px; background-color: #FFF; border: none; margin: 0 5px; cursor: pointer; border-radius: 10px; transition-duration: 0.5s;}
#topBanner .top_controls li.select{background-color: #ff6600; border: none; width:18px;}


#topBanner .top_btn{position: absolute;  top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;}
#topBanner .top_prev{display: none;}
#topBanner .top_next{display: none;}
#topBanner .top_play{position: absolute; right: 75px; bottom: 100px; width: 20px; height: 20px; background: none; background-image: url(img/play_btn_spirte.png); border: none; cursor: pointer;}



#hanwhaToday{position: relative; width: 100%; margin: 0 auto; 
background-image: url(../img/today_bg.png);  background-repeat: no-repeat;
background-position: center;
padding: 50px 0; box-sizing: border-box; overflow: hidden;}
#hanwhaToday .hanwha_inner{display: flex; flex-direction: column; text-align: center; justify-content: center; height: 951px; width: 80%; margin: 0 auto; position: relative;}
#hanwhaToday .hanwha_inner .title{font-size: 40PX; }
#hanwhaToday .hanwha_inner .text{font-size: 18px; width: 80%; position: relative; margin: 0 auto;}
#hanwhaToday .hanwha_inner .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#hanwhaToday .history_list{position: relative;width: 90%;max-width: 1400px; display: flex; flex-wrap: wrap; flex-direction: row; margin: 40px auto; justify-content: space-around;}
#hanwhaToday .history_list li{width: 45%; text-align: center;}
#hanwhaToday .history_list li h3{font-size: 1.5em; color: #FF6600; margin-bottom: 10px;}
#hanwhaToday .history_list li p{font-size: 0.8em; font-weight: bold; color: #333; margin-bottom: 25px;}
#hanwhaToday .history_list li p span{font-size: 2em; }



#business{position: relative; overflow: hidden;padding: 50px 0; box-sizing: border-box;}
#business .business_wrap{position: relative;}
#business .business_wrap .title{font-size: 40px;text-align: center; margin-top: 70px;}
#business .business_wrap .text{font-size: 18px;text-align: center; margin-bottom: 50px; font-weight: 700;}
#business .business_wrap .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#business .accordion_wrap .accordion{display: flex;}
#business .accordion_wrap .accordion li{width: 25%; height:600px; background-position: center; background-size: cover; float: left;
transition-duration: 0.5s; transition-timing-function: linear; display: flex; justify-content: center; align-items: center; cursor: pointer;}
#business .accordion_wrap .accordion li:nth-child(1){background-image: url(../img/business.jpg);}
#business .accordion_wrap .accordion li:nth-child(2){background-image: url(../img/business1.jpg);}
#business .accordion_wrap .accordion li:nth-child(3){background-image: url(../img/business2.jpg);}
#business .accordion_wrap .accordion li:nth-child(4){background-image: url(../img/business3.jpg);}
#business .accordion_wrap .accordion .title{color: #FFF ; font-size: 2em; text-align: center; }




#news{position: relative; padding: 50px 0; box-sizing: border-box;}
#news .news_inner{position: relative;  width: 80%; margin:80px auto;}
#news .news_inner .title{font-size: 40px;text-align: center;}
#news .news_inner .text{font-size: 18px;text-align: center; margin-bottom: 150px; font-weight: 700;}
#news .news_inner .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#news .news_inner .news_list{position: relative; margin: 0 auto; display: flex; justify-content: space-around; width: 100%; max-width: 1440px; flex-wrap: wrap;}
#news .news_inner .news_list li{width: 38%; position: relative; opacity: 0; margin-bottom: 14%;}
#news .news_inner .news_list li a{color: #111111; }
#news .news_inner .news_list li a::before{content: ""; width: 50px; height: 4px; background-color: #ff6600; position: absolute; top:-40%; left: 0; -webkit-transition: 0.5s;
    transition: 0.5s;}
#news .news_inner .news_list li a:hover::before {width: 150px;}
#news .news_inner .news_list .news_list_title{line-height: 1.5; font-size: 14px;}
#news .news_inner .news_list .news_list_data{margin-top: 40px; font-weight: 400;}
#news a .btn {position: relative; margin: 0 auto; border: 1px solid #111111; line-height: 60px; width: 140px; height: 60px; display: block; text-align: center; background-color: #FFF; box-sizing: border-box; cursor: pointer;}
#news a .btn:hover{border: 1px solid #ff6600; color: #ff6600;}
#news a .btn {font-size: 17px; font-weight: 700; color: #111111;}




/*pager*/
.pager{position: fixed; right: 50px; top: 50%; transform: translateY(-50%);}
.pager .pager_list{display: flex; flex-direction: column; align-items: flex-end;}
.pager .pager_list li{width: 12px; height: 12px; border-radius: 12px; background-color: none; border: 1px solid #ff6600; margin: 5px 0;  cursor: pointer;}
.pager .pager_list li.select{width: 12px; height: 12px; background-color: #ff6600;}
}























@media screen and (max-width:600px) {

#banner{position: relative; width: 100%; height: 951px; overflow: hidden;}
#banner .banner img{position: absolute;  }
#banner .banner_text_wrap{position: absolute; left: 40px; top: 50%; transform: translateY(-50%); opacity: 0; margin-top: 100px; transition-duration: 0.5s;}
#banner .banner_text_wrap .banner_title{font-size: 2.5em; color: #ff6600; margin-bottom: 20px;}
#banner .banner_text_wrap .banner_text{font-size: 1.5em; font-weight: 700;}


#portfolio{position: relative; overflow: hidden; height: 100vh; padding: 50px 0; box-sizing: border-box;}
#portfolio .pf_wrap{position: relative;height: 85vh; }
#portfolio .pf_wrap .pf_img {display: none;}
#portfolio .pf_wrap .pf_text_wrap{position: absolute; width: 90%; top: 50%; transform:translateY(-50%); text-align: left;  padding-right: 100px; box-sizing: border-box;  margin-left: 20px;}
#portfolio .pf_wrap .pf_text_wrap .pf_text1{font-size:3em; margin-left: 15px;}
#portfolio .pf_wrap .pf_text_wrap .pf_text2{font-size: 1.3em; font-weight: 500; margin-right: 24px;}
#portfolio .pf_wrap .pf_text2_wrap{position: relative; justify-content: start; display: flex;margin-left: 15px; }
#portfolio .pf_wrap .pf_text_wrap .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative; margin-top: 44px;}





#topBanner{position: relative; width: 100%; height: 951px; overflow: hidden;}
#topBanner .top_bg{opacity: 0; width: 100%;}
#topBanner .top_img li{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -45%);}
#topBanner .top_text li{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70%;}
#topBanner .top_text li:first-child{display: block}
#topBanner .top_text li h2{font-size: 1em; color: #FFF; 
position: relative; transition-duration: 0.5s; text-align: center; font-family: 'Noto Sans KR', sans-serif;}
#topBanner .top_text li h2 span{color: #ffffff;}
#topBanner .top_text .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#topBanner .top_text li .top_more{width: 160px; height: 50px; display: block; background-color: rgba(255,255,255,0.3); color: #000; border: 1px solid #000; border-radius: 26px; text-align: center; line-height: 50px; font-size: 13px; 
position: relative; top: 100px; transition-duration: 0.5s;}

#topBanner .top_controls{position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex;}
#topBanner .top_controls li{width: 18px; height: 18px; background-color: #FFF; border: none; margin: 0 5px; cursor: pointer; border-radius: 10px; transition-duration: 0.5s;}
#topBanner .top_controls li.select{background-color: #ff6600; border: none; width:18px;}


#topBanner .top_btn{position: absolute;  top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;}
#topBanner .top_prev{display: none;}
#topBanner .top_next{display: none;}
#topBanner .top_play{position: absolute; right: 75px; bottom: 100px; width: 20px; height: 20px; background: none; background-image: url(img/play_btn_spirte.png); border: none; cursor: pointer;}



#hanwhaToday{position: relative; width: 100%; margin: 0 auto; 
background-image: url(../img/today_bg.png);  background-repeat: no-repeat;
background-position: center;
padding: 50px 0; box-sizing: border-box; overflow: hidden;}
#hanwhaToday .hanwha_inner{display: flex; flex-direction: column; text-align: center; justify-content: center; height: 951px; width: 80%; margin: 0 auto; position: relative;}
#hanwhaToday .hanwha_inner .title{font-size: 35px; }
#hanwhaToday .hanwha_inner .text{font-size: 15px; width: 80%; position: relative; margin: 0 auto;}
#hanwhaToday .hanwha_inner .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#hanwhaToday .history_list{position: relative;width: 90%;max-width: 1400px; display: flex; flex-wrap: wrap; flex-direction: row; margin: 40px auto; justify-content: space-around;}
#hanwhaToday .history_list li{width: 45%; text-align: center;}
#hanwhaToday .history_list li h3{font-size: 1.5em; color: #FF6600; margin-bottom: 10px;}
#hanwhaToday .history_list li p{font-size: 0.8em; font-weight: bold; color: #333; margin-bottom: 25px;}
#hanwhaToday .history_list li p span{font-size: 2em; }



#business{position: relative; overflow: hidden;padding: 50px 0; box-sizing: border-box;}
#business .business_wrap{position: relative;}
#business .business_wrap .title{font-size: 35px;text-align: center; margin-top: 70px;}
#business .business_wrap .text{font-size: 15px;text-align: center; margin-bottom: 50px; font-weight: 700;}
#business .business_wrap .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#business .accordion_wrap .accordion{display: flex;}
#business .accordion_wrap .accordion li{width: 25%; height:600px; background-position: center; background-size: cover; float: left;
transition-duration: 0.5s; transition-timing-function: linear; display: flex; justify-content: center; align-items: center; cursor: pointer;}
#business .accordion_wrap .accordion li:nth-child(1){background-image: url(../img/business.jpg);}
#business .accordion_wrap .accordion li:nth-child(2){background-image: url(../img/business1.jpg);}
#business .accordion_wrap .accordion li:nth-child(3){background-image: url(../img/business2.jpg);}
#business .accordion_wrap .accordion li:nth-child(4){background-image: url(../img/business3.jpg);}
#business .accordion_wrap .accordion .title{color: #FFF ; font-size: 1.5em; text-align: center; }




#news{position: relative; padding: 50px 0; box-sizing: border-box;}
#news .news_inner{position: relative;  width: 80%; margin:80px auto;}
#news .news_inner .title{font-size: 35px;text-align: center;}
#news .news_inner .text{font-size: 15px;text-align: center; margin-bottom: 90px; font-weight: 700;}
#news .news_inner .bar{width: 50px; height: 4px;background-color: #ff6600; position: relative;  margin: 25px auto;}
#news .news_inner .news_list{position: relative; margin: 0 auto; display: flex; justify-content: space-around; width: 100%; max-width: 1440px; flex-wrap: wrap;}
#news .news_inner .news_list li{width: 70%; position: relative; opacity: 0; margin-bottom: 14%;}
#news .news_inner .news_list li:nth-child(3){display: none;}
#news .news_inner .news_list li a{color: #111111; }
#news .news_inner .news_list li a::before{content: ""; width: 50px; height: 4px; background-color: #ff6600; position: absolute; top:-40%; left: 0; -webkit-transition: 0.5s;
    transition: 0.5s;}
#news .news_inner .news_list li a:hover::before {width: 150px;}
#news .news_inner .news_list .news_list_title{line-height: 1.5; font-size: 14px;}
#news .news_inner .news_list .news_list_data{margin-top: 40px; font-weight: 400;}
#news a .btn {position: relative; margin: 0 auto; border: 1px solid #111111; line-height:50px; width: 130px; height:50px; display: block; text-align: center; background-color: #FFF; box-sizing: border-box; cursor: pointer;}
#news a .btn:hover{border: 1px solid #ff6600; color: #ff6600;}
#news a .btn {font-size: 16px; font-weight: 700; color: #111111;}



/*pager*/
.pager{position: fixed; right: 50px; top: 50%; transform: translateY(-50%);}
.pager .pager_list{display: flex; flex-direction: column; align-items: flex-end;}
.pager .pager_list li{width: 12px; height: 12px; border-radius: 12px; background-color: none; border: 1px solid #ff6600; margin: 5px 0;  cursor: pointer;}
.pager .pager_list li.select{width: 12px; height: 12px; background-color: #ff6600;}
}