@CHARSET "UTF-8";

body { line-height: 1.2; color: #444444; font-family: 'Noto Sans KR', sans-serif;}
.wrap { width: 1440px; height: 100%; margin-left: auto; margin-right: auto; position: relative; }

/* Section common
	* --------------------------------------- */
.section {text-align: center; background-size: cover; background-repeat: no-repeat; position: relative; background-attachment: fixed !important;}
.section .main_title {font-family: 'DWImpactamin' !important; font-size: 50px; color: #222222; margin-bottom: 30px;}

/* Section 1
	* --------------------------------------- */
#section1 { padding: 100px 0; background-image: url(../img/main/visual_01_01.jpg?v20221101); background-size: cover !important; background-position: right; transition: all 700ms linear;}
#section1 .box {width: 100%; height: 650px; padding-top: 100px;}
#section1 .box > div.top {text-align: left; width: 800px; height: 275px;}
#section1 .box > div.top > .bg {display: inline-block; background: url(../img/main/img_maintitle_01.png?v20221101) no-repeat; width: 800px; height: 215px;  transition: all 700ms linear;}
#section1 .box > div.top > .slide-btn {width: 200px; height: 50px; background-color: rgba(0,0,0,0.1); border-radius: 25px; position: relative;}
#section1 .box > div.top > .slide-btn > .btn-wrap {position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%); width: 150px;}
#section1 .box > div.top > .slide-btn > .btn-wrap > span {font-size: 18px; font-weight: bold; color: #ffffff; vertical-align: middle;}
#section1 .box > div.top > .slide-btn > .btn-wrap > span.icon {display: inline-block; background: url(../img/btn_control_01.png?v20221101) no-repeat; width: 22px; height: 22px; cursor: pointer;}
#section1 .box > div.top > .slide-btn > .btn-wrap > span.icon.arrow_left {background-position: 0 0; margin-right: 15px;}
#section1 .box > div.top > .slide-btn > .btn-wrap > span.icon.arrow_right {background-position: 0 -25px; margin-left: 15px;}
#section1 .box > div.top > .slide-btn > .btn-wrap > span.icon.pause {background-position: 0 -50px; margin-left: 5px;} 
#section1 .box > div.top > .slide-btn > .btn-wrap > span.icon.start {background-position: 0 -75px; margin-left: 5px;}
#section1 .box > div.bottom > ul {display: block; width: 100%; text-align: center; height: 250px; margin-top: 110px;}
#section1 .box > div.bottom > ul > li {vertical-align: bottom; position: relative; float: left; margin-right: 48px; width: 200px; height: 200px; z-index: 2;}
#section1 .box > div.bottom > ul > li:LAST-CHILD {margin-right: 0;}
#section1 .box > div.bottom {padding-bottom: 35px;}
#section1 .box > div.bottom > ul > li > .line {text-align: center; border-top: 2px solid #ffffff; display:inline-block; width: 200px; height: 45px; overflow-y: hidden; transition: height ease 1s 0s; position: absolute; left: 0; bottom: 0;}
#section1 .box > div.bottom > ul > li > .line .in {display: flex; align-items: center; justify-content: center;}
#section1 .box > div.bottom > ul > li > .line:hover {height: 245px; background: linear-gradient(to bottom, #84c1fa, #05acd5); border-top: 0;}
#section1 .box > div.bottom > ul > li > .line:hover .in {display: none;}
#section1 .box > div.bottom > ul > li > .line > .in > .text {color: #ffffff; font-size: 15px; line-height: 1.2; font-weight: bold; vertical-align: super; display: inline-block; vertical-align: 10px;}
#section1 .box > div.bottom > ul > li > .line > .in > .icon {display: inline-block; margin: 5px 0 0 7px; background: url(../img/icon_quicklink_hover.png?v20221101) no-repeat; width: 35px; height: 35px; background-size: 35px;}
#section1 .box > div.bottom > ul > li > .line > .in > .icon {background-position: 0 0;}
#section1 .box > div.bottom > ul > li+li > .line > .in > .icon {background-position: 0 -35px;}
#section1 .box > div.bottom > ul > li+li+li > .line > .in > .icon {background-position: 0 -70px;}
#section1 .box > div.bottom > ul > li+li+li+li > .line > .in > .icon {background-position: 0 -105px;}
#section1 .box > div.bottom > ul > li+li+li+li+li > .line > .in > .icon {background-position: 0 -140px;}
#section1 .box > div.bottom > ul > li+li+li+li+li+li > .line > .in > .icon {background-position: 0 -175px;}
#section1 .box > div.bottom > ul > li > .line .over {margin-top: 30px; cursor: pointer;}
#section1 .box > div.bottom > ul > li > .line .over .title {color: #ffffff; font-size: 18px; font-weight: bold; margin-bottom: 15px;}
#section1 .box > div.bottom > ul > li > .line .over .icon {display: inline-block; background: url(../img/icon_quicklink_hover.png?v20221101) no-repeat; width: 95px; height: 95px;}
#section1 .box > div.bottom > ul > li > .line .over .btn {display: inline-block; background: url(../img/btn_icon_quicklink_hover.png?v20221101) no-repeat; width: 40px; height: 40px; margin-top: 20px;}
#section1 .box > div.bottom > ul > li > .line .over .icon {background-position: 0 0;}
#section1 .box > div.bottom > ul > li+li > .line .over .icon {background-position: 0 -100px;}
#section1 .box > div.bottom > ul > li+li+li > .line .over .icon {background-position: 0 -200px;}
#section1 .box > div.bottom > ul > li+li+li+li > .line .over .icon {background-position: 0 -300px;}
#section1 .box > div.bottom > ul > li+li+li+li+li > .line .over .icon {background-position: 0 -400px;}
#section1 .box > div.bottom > ul > li+li+li+li+li+li > .line .over .icon {background-position: 0 -500px;}
#section1 .scroll_wrap {position: relative; width: 1440px; height: 100%; margin: auto;}
#section1 .scroll {display: inline-block; width: 45px; height: 60px; position: absolute; left: 50%; transform: translateX(-50%);}
#section1 .scroll > .icon {display: inline-block; background: url(../img/icon_scroll.png?v20221101) no-repeat; width: 45px; height: 60px;}

/* Section 2
	* --------------------------------------- */
#section2 { background-image: url(../img/main/visual_02.png?v20221101); background-color: #fcfcff; background-size: 100% 100%;}
#section2 .box {width: 100%; height: auto; padding-top: 200px;}
#section2 .box > div.top {display: table; width: 100%; margin-bottom: 30px;}
#section2 .box > div.top > div {display: table-cell; width: 50%; text-align: left; vertical-align: middle;}
#section2 .box > div.top > div+div {text-align: right;}
#section2 .box > div.top > div > div {width: 700px; height: 300px; display: inline-block; text-align: left; }
#section2 .box > div.top > div#grade > div {background-color: #97c4ff; background-image: url(../img/main/bg_box_01.png?v20221101);}
#section2 .box > div.top > div#info > div {background-color: #f3f3fc; background-image: url(../img/main/bg_box_02.png?v20221101); position: relative;}

#section2 .box > div.bottom {display: table; width: 100%; color: #ffffff;}
#section2 .box > div.bottom > div {display: table-cell; width: 33%; text-align: left;}
#section2 .box > div.bottom > div.linkbox > div {background-repeat: no-repeat; background-size: contain; cursor: pointer;}
#section2 .box > div.bottom > div#linkbox1 > div {background-image: url(../img/main/bg_box_03.png?v20221101v2); background-color: #daf2ff;}
#section2 .box > div.bottom > div#linkbox2 > div {background-image: url(../img/main/bg_box_04.png?v20221101v2); background-color: #fff6da;}
#section2 .box > div.bottom > div#linkbox3 > div {background-image: url(../img/main/bg_box_05.png?v20221101v2); background-color: #d8e3ff;}

#section2 .box > div.bottom > div+div {text-align: center;}
#section2 .box > div.bottom > div+div+div {text-align: right;}
#section2 .box > div.bottom > div > div {width: 450px; height: 200px; display: inline-block; text-align: left;}
#section2 .box > div.bottom > div > div > div.gosite {margin-top: 70px;}
#section2 .box > div.bottom > div > div > div.gosite > .icon {display: inline-block; background: url(../img/btn_more.png?v20221101) no-repeat; width: 35px; height: 10px; margin-left: 5px; background-position: 0 0;}

#section2 .box > div > div > div {padding: 30px 40px 0 40px;}
#section2 .box > div > div > div > div.title {display: table; width: 100%; margin-bottom: 25px;}
#section2 .box > div > div > div > div.title > div {display: table-cell; vertical-align: middle; font-size: 24px; font-weight: bold;}
#section2 .box > div > div > div > div.title > div > .sub {margin-left: 10px; font-size: 14px; font-weight: normal; color: #333333; }
#section2 .box > div > div > div > div.title > div+div {text-align: right; font-size: 14px; font-weight: normal; float: right; margin-top: 10px; cursor: pointer;}
#section2 .box > div > div > div > div.title > div+div > .icon {display: inline-block; background: url(../img/btn_more.png?v20221101) no-repeat; width: 35px; height: 10px; margin-left: 5px;}
#section2 .box > div > div+div > div > div.title > div+div > .icon {background-position: 0 -25px;}

#section2 .box > div > div#grade > div > div.title > div {color: #ffffff;}
#section2 .box > div > div#grade > div > div.content {height: 200px;}
#section2 .box > div > div#grade > div > div.content > #company {width: 620px; height: 160px; overflow: hidden;}
#section2 .box > div > div#grade > div > div.content > #company > ul {height: 160px; width: 800%; transition: 1s;}
#section2 .box > div > div#grade > div > div.content > #company > ul:after{content:"";display:block;clear:both;}
#section2 .box > div > div#grade > div > div.content > #company > ul.slide1{margin-left:0%;}
#section2 .box > div > div#grade > div > div.content > #company > ul.slide2{margin-left:-100%;}
#section2 .box > div > div#grade > div > div.content > #company > ul.slide3{margin-left:-200%;}
#section2 .box > div > div#grade > div > div.content > #company > ul.slide4{margin-left:-300%;}
#section2 .box > div > div#grade > div > div.content > #company > ul.slide5{margin-left:-400%;}
#section2 .box > div > div#grade > div > div.content > #company > ul.slide6{margin-left:-500%;}
#section2 .box > div > div#grade > div > div.content > #company > ul.slide7{margin-left:-600%;}
#section2 .box > div > div#grade > div > div.content > #company > ul.slide8{margin-left:-700%;}
    
#section2 .box > div > div#grade > div > div.content > #company > ul > li {float: left;}
#section2 .box > div > div#grade > div > div.content > #company > ul > li > ul {height: 160px;}
#section2 .box > div > div#grade > div > div.content > #company > ul > li > ul > li {float: left; width: 116px; height: 100%; margin-right: 10px; border-radius: 10px;}
#section2 .box > div > div#grade > div > div.content > #company > ul > li > ul > li:LAST-CHILD {margin-right: 0;}
#section2 .box > div > div#grade > div > div.content > #company > ul > li > ul > li.com_nm {background-color: #222e4d; font-size: 14px; color: #666666;  position: relative;}
#section2 .box > div > div#grade > div > div.content > #company > ul > li > ul > li.com_nm > div {display: inline-block; width:95px; position: absolute; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 16px; word-break: break-all;}
#section2 .box > div > div#grade > div > div.content > #company > ul > li > ul > li.grd {background-color: #ffffff;}
#section2 .box > div > div#grade > div > div.content > #company > ul > li > ul > li.grd > .title {height: 35px; background-color: #f8f8f8; text-align: center; padding-top: 10px; border-radius: 10px 10px 0 0; font-size: 14px; color: #666666;}
#section2 .box > div > div#grade > div > div.content > #company > ul > li > ul > li.grd > .value {position: relative; width: 100%; height: 125px; text-align: center;}
#section2 .box > div > div#grade > div > div.content > #company > ul > li > ul > li.grd > .value > span {height: 125px; display: inline-block; line-height: 2.8; font-size: 40px;}

#section2 .box > div > div#grade > div > div.content > #grd_slide {margin-top: 20px;}
#section2 .box > div > div#grade > div > div.content > #grd_slide > div {display: inline-block;}
#section2 .box > div > div#grade > div > div.content > #grd_slide > div > span {color: #ffffff; font-size: 16px;}
#section2 .box > div > div#grade > div > div.content > #grd_slide > div > .icon {display: inline-block; background: url(../img/btn_control_02.png?v20221101) no-repeat; width: 13px; height: 13px; margin-left: 5px; vertical-align: middle; cursor: pointer;}
#section2 .box > div > div#grade > div > div.content > #grd_slide > div > .icon.pause {background-position: 0 -50px;}
#section2 .box > div > div#grade > div > div.content > #grd_slide > div > .icon.start {background-position: 0 -75px;}

#section2 .box > div > div#grade > div > div.content > #grd_slide input{display:none;}
#section2 .box > div > div#grade > div > div.content > #grd_slide p {display: inline-block;}
#section2 .box > div > div#grade > div > div.content > #grd_slide p label{display:inline-block;vertical-align:middle;background: url(../img/btn_control_02.png?v20221101) no-repeat; width: 13px; height: 13px;margin-left:5px; background-position: 0 -25px; cursor: pointer;}
#section2 .box > div > div#grade > div > div.content > #grd_slide p label.active {background-position: 0 0;}

#section2 .box > div > div#info .loading {display:inline-block; width: 100px; height: 55px; background: url(../img/loading_esg_b.gif) no-repeat; position: absolute; top: 55%; left: 49.5%; transform: translate(-50%, -50%);}
#section2 .box > div > div#info > div > div.content > div {display: flex; width: 100%;}
#section2 .box > div > div#info > div > div.content > div > div {display: table-cell; position: relative;}
#section2 .box > div > div#info > div > div.content > div > div.legend {width: 23%;height: 150px; display: flex; flex-direction: column; justify-content: space-around;}
#section2 .box > div > div#info > div > div.content > div > div.legend > .text {font-size: 14px; font-weight: 400; color: #666666; word-break: break-word;}
#section2 .box > div > div#info > div > div.content > div > div.graph {width: 77%; position: relative;}
#section2 .box > div > div#info > div > div.content > div > div.graph > .bar {position: absolute; width: 0px; height: 15px;}
#section2 .box > div > div#info > div > div.content > div > div.graph > #bar1 {top:15px; background-color: #cbcdda; background: url(../img/pattern/ptn_main_01.png?v20221101) repeat 50% 50% / 3px;}
#section2 .box > div > div#info > div > div.content > div > div.graph > #bar2 {top:35px; background-color: #97c4ff; background: url(../img/pattern/ptn_main_02.png?v20221101) repeat 50% 50% / 3px;}
#section2 .box > div > div#info > div > div.content > div > div.graph > #bar3 {top:55px; background-color: #00abd4; background: url(../img/pattern/ptn_main_03.png?v20221101) repeat 50% 50% / 3px;}
#section2 .box > div > div#info > div > div.content > div > div.graph > #bar4 {top:85px; background-color: #cbcdda; background: url(../img/pattern/ptn_main_01.png?v20221101) repeat 50% 50% / 3px;}
#section2 .box > div > div#info > div > div.content > div > div.graph > #bar5 {top:105px; background-color: #97c4ff; background: url(../img/pattern/ptn_main_02.png?v20221101) repeat 50% 50% / 3px;}
#section2 .box > div > div#info > div > div.content > div > div.graph > #bar6 {top:125px; background-color: #00abd4;background: url(../img/pattern/ptn_main_03.png?v20221101) repeat 50% 50% / 3px;}

#section2 .box > div > div#info > div > div.content > div > div.graph > .bar > span {position: absolute; left: calc(100% + 10px); font-size: 12px; font-weight: 400; color: #666666;}
#section2 .box > div > div#info > div > div.content > div > div.graph > ul {width: 100%; height: 150px;}
#section2 .box > div > div#info > div > div.content > div > div.graph > ul > li {float: left; width: 95px; height: 150px; border-left: 1px solid #dddddd ;border-bottom: 1px solid #dddddd;}
#section2 .box > div > div#info > div > div.content > div > div.graph > ul > li:LAST-CHILD {border-right: 1px solid #dddddd;} 

#section2 .box > div > div#info > div > div.content > div.legend-box {margin-top: 15px; text-align: center; font-size: 12px; font-weight: 400; color: #666666; justify-content: center;}
#section2 .box > div > div#info > div > div.content > div.legend-box > .icon {display: inline-block; width: 12px; height: 12px; margin-right: 10px; vertical-align: bottom; background-size: 3px;}
#section2 .box > div > div#info > div > div.content > div.legend-box > .icon1 {background-color: #cbcdda; background-image: url(../img/pattern/ptn_main_01.png?v20221101); }
#section2 .box > div > div#info > div > div.content > div.legend-box > .icon2 {background-color: #97c4ff; background-image: url(../img/pattern/ptn_main_02.png?v20221101); margin-left: 20px;}
#section2 .box > div > div#info > div > div.content > div.legend-box > .icon3 {background-color: #00abd4; background-image: url(../img/pattern/ptn_main_03.png?v20221101); margin-left: 20px;}

/* Section 3
	* --------------------------------------- */
/* #section3 { padding: 100px 0; } */
#section3 { background-image: url(../img/main/visual_03.png?v20221101); background-size: 100% 100%; }
#section3 * {color:#ffffff;}
/* #section3 .box {top: 10%; position: absolute; width: 100%; height: 750px; padding-top: 90px;} */
#section3 .box {width: 100%; height: auto; padding-top: 200px;}

#section3 .box > div {display: table; width: 100%; margin-bottom: 30px;}
#section3 .box > div > div {display: table-cell; width: 50%; text-align: left;}
#section3 .box > div > div+div {text-align: right;}
#section3 .box > div > div > div {width: 700px; height: 270px; display: inline-block; text-align: left; padding: 30px 40px 25px 40px; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.3); background-color: rgba(0,0,0,0.3);}
#section3 .box > div > div > div > div.title {display: table; width: 100%; margin-bottom: 25px;}
#section3 .box > div > div > div > div.title > div {display: table-cell; vertical-align: middle; font-size: 24px; font-weight: bold;}
#section3 .box > div > div > div > div.title > div > .sub {margin-left: 10px; font-size: 14px; font-weight: normal;}
#section3 .box > div > div > div > div.title > div+div {text-align: right; font-size: 14px; font-weight: normal; float: right; margin-top: 10px; cursor: pointer;}
#section3 .box > div > div > div > div.title > div+div > .icon {display: inline-block; background: url(../img/btn_more.png?v20221101) no-repeat; width: 35px; height: 10px; margin-left: 5px;}

.main_table {width: 620px;}
.main_table > table {width: 100%; height: 155px; border-collapse: collapse; } /* display: block; */
.main_table > table > thead * {font-weight: normal; font-size: 14px;}
.main_table > table > thead > tr > th {position: relative; height: 35px;}
.main_table > table > thead > tr > th > .th_bg{ border-bottom: 33px solid #00abd4; border-left: 25px solid transparent; position: absolute; width: calc(100%); height: calc(100%); top: 0; left: 0;}
.main_table > table > thead > tr > th > .th_text{position: absolute; width: 100%; top: 10px; left: 50%; text-align: center; transform: translateX(-50%); padding-left: 15px; box-sizing: border-box;}
.main_table > table > tbody * {font-weight: normal; font-size: 16px;}
.main_table > table > tbody > tr {border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.main_table > table > tbody > tr > td {height: 40px; padding: 0 10px}
.main_table > table > tbody > tr > td.cmpr {font-size: 16px;}
.main_table > table > tbody > tr > td.fluc1 {color: #f287a9 !important; }
.main_table > table > tbody > tr > td.fluc2 {color: #84b9ff !important; }
.main_table > table > tbody > tr > td.cmpr > .updown_icon {display: inline-block; width: 10px; height: 10px; margin-right: 8px; background-image: url(../img/main/icon_mainarrow.png?v20221101); background-repeat: no-repeat;}
.main_table > table > tbody > tr > td.fluc0 > .updown_icon {background-position: 0 -100px;}
.main_table > table > tbody > tr > td.fluc1 > .updown_icon {background-position: 0 0;}
.main_table > table > tbody > tr > td.fluc2 > .updown_icon {background-position: 0 -25px;}
.main_table > table > tbody > tr > td.fluc3 > .updown_icon {background: none;}

.scrolltable{ table-layout: fixed; border-collapse: collapse; }
.scrolltable thead { display:block; width:100%; }
.scrolltable tbody{ display:block; overflow:auto; height:122px; width:100%; }
.scrolltable th, .scrolltable td { padding: 10px; text-align: left; width: 100px; text-align: center; }
.scrolltable tbody::-webkit-scrollbar { width: 5px; }
.scrolltable tbody::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.3); }
.scrolltable tbody::-webkit-scrollbar-thumb { background-color: #ffffff; }
.scrolltable tbody::-webkit-scrollbar-button { width: 0; height: 0; }

.main_table tbody tr.load {border: 0; position: relative;}
.main_table tbody .loading {display:inline-block; width: 100px; height: 55px; background: url(../img/loading_esg_w.gif) no-repeat; position: absolute; top: 55%; left: 51%; transform: translate(-50%, -50%);}
.scrolltable tbody .loading {top: 170% !important; left: 315.5% !important;}

/* Section 4
	* --------------------------------------- */
#section4 {background-color: #333333 !important;}
/* #section4 .footer-wrap {position:relative; width:1440px; margin:auto; clear:both;} */



@media (max-width: 1440px) {
	.section {background-size: 1440px 100%;}
	.scrolltable tbody .loading {top: 170% !important; left: 51.5% !important;}
}