@charset "euc-kr";

/********************************************************************************************************************************
* °øÅë
********************************************************************************************************************************/
.comm-grobal-wrap {clear: both; position: relative; background-color: #fff;}
.comm-frame {
	clear: both;
	position: relative;
	min-width: 1300px;
	padding: 90px 0 110px 0;
/*	border-bottom: 1px solid #eee;	*/
	overflow: hidden;
	}
.comm-frame.bg {background-color: #efeff2;}


/*----- title --------------------------------------------------*/
.comm-frame .title {
	position: relative;
	margin: 0 0 25px 0; padding: 0;
	text-align: center;
	z-index: 1;
	}
.comm-frame .title .icon {
	display: block;
	margin: -35px auto -5px auto;
	width: 49px; height: 43px;
	font-size: 1px; color: transparent; line-height: 1px;
	background: url('../../images/tit_ic_esg.png') no-repeat 0 0;
	background-size:cover;
	}
.comm-frame .title.white .icon	{background-image: url('../../images/tit_ic_esg.png');}

.comm-frame .title h3 {
	display: inline-block;
	position: relative;
	margin: 0 0 5px 0;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic';
	font-size: 44px; color: #111; letter-spacing: -2px; line-height: 130%;
	}
.comm-frame .title.white h3, .comm-frame .title.white2 h3 {color: #fff;}
.comm-frame .title h3.big {font-size: 3.2em;}
.comm-frame .title strong {display: inline-block; margin: 0 0 0 2px; font-weight: 700;}
.comm-frame .title h3 .big {
	display: inline-block;
	margin: 0 0 0 0;
	font-size: 130%;
	}
.comm-frame .title h3 .dot {display: inline-block; margin: 0 0 9px 4px; font-size: 150%; color: #1ed67e; vertical-align: text-bottom;}
.comm-frame .title.white2 h3 .dot {color: #1ed67e;}
.comm-frame .title h3 .eng {display: inline-block; margin: 0 0 2px 0; font-size: 120%; letter-spacing: -3px; vertical-align: text-bottom;}

.comm-frame .title.sign h3::before {
	content: "[";
	position: absolute; top: 2px; left: -30px;
	font-size: 130%; color: #e94e1b; font-weight: 700;
	}
.comm-frame .title.sign h3::after {
	content: "]";
	position: absolute; top: 2px; right: -30px;
	font-size: 130%; color: #e94e1b; font-weight: 700;
	}

.comm-frame .title h4 {
	display: block;
	margin: 0 0 0 0; padding: 0 0 10px 0;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic' sans-serif;
	font-size: 16px; color: #888; letter-spacing: 0px; line-height: 140%; font-weight: 100;
	}
.comm-frame .title.white h4 {color: rgba(255,255,255, 0.7);}

/*----- sub title -----*/
.comm-frame .sub-title {
	clear: both;
	position: relative;
	margin: 0 0 14px 0;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic';
	font-size: 28px; color: #333; letter-spacing: -0.5px; line-height: 120%; font-weight: 700;
	overflow: hidden;
	}
.comm-frame .sub-title .more {
	clear: both;
	display: inline-block;
	position: absolute; bottom: -1px; right: 5px;
	height: 20px;
	font-size: 14px; color: #888; letter-spacing: -0.5px; line-height: 20px; font-weight: 300; text-decoration: none;
	}
.comm-frame .sub-title .more i {margin: 0 5px 2px 0; font-size: 14px; color: #999; vertical-align: bottom; transition: all 0.3s;}
.comm-frame .sub-title .more:hover i {color: #66cc33;}





/********************************************************************************************************************************
* Top banner
********************************************************************************************************************************/
.ESG-main-banner {
	clear: both;
	position: relative; top: 0; bottom: 0; left: 0; right: 0;
	min-width: 1300px !important; max-width: none !important;
	margin: 0; padding: 0;
	z-index: 1;
	overflow: hidden;
	}
.ESG-main-banner .Navi .esg_subtxt{
	font-size:24px;
	margin-bottom:50px;
	letter-spacing:-0.7px;
	margin-top:35px;
	}
.ESG-main-banner .Navi .esg_subtxt b{
	font-size:30px;
	}
.ESG-main-banner .gallery-top {height: 650px;}

.ESG-main-banner .gallery-top .swiper-slide {
	background-position: 50% bottom;
	background-repeat: no-repeat;
	background-size: cover;
/*	transition: filter 1s;	*/
	animation: slide-ani 20s infinite;
	}
.ESG-main-banner .gallery-top .swiper-slide::after {
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	background: rgba(0,0,0, 0.6) url('../../images//main_visual_dot2.png') repeat;
	z-index: 2;
	}

@keyframes slide-ani {
    0%		{background-size: 100% auto;}
    50%		{background-size: 110% auto;}
    100%	{background-size: 100% auto;}
	}

.ESG-main-banner .gallery-top .swiper-slide img {
	display: block;
	min-width: 100%; min-height: 100%;
	width: auto; height: auto;
	}

.ESG-main-banner .gallery-top .swiper-pagination {padding-bottom: 0px;}
.ESG-main-banner .gallery-top .swiper-pagination .swiper-pagination-bullet {background-color: rgba(255,255,255, 0.7);}

.ESG-main-banner .swiper-slide-active .animated-item-1 {animation: fadeInLeftShort 0.3s linear 0.3s both;}
.ESG-main-banner .swiper-slide-active .animated-item-2 {animation: fadeInRightShort 0.3s linear 0.6s both;}
.ESG-main-banner .swiper-slide-active .animated-item-3 {animation: fadeInUpShort 0.3s linear 0.9s both;}
.ESG-main-banner .swiper-slide-active .animated-item-4 {animation: fadeInUpShort 0.3s linear 1.2s both;}

.ESG-main-banner .swiper-pagination-bullet-active {background-color: #ff5529 !important;}

/*----- Header Text & Qucik Button -----*/
.ESG-main-banner .Navi {
	position: absolute; top: 220px; left: 50%;
	width: 1200px;
	margin: 0 0 0 -600px;
	text-align: center;
	z-index: 10;
	}

.ESG-main-banner .Navi h1 {
	display: block;
	margin: 0 0 30px 0;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic' sans-serif;
	font-size: 70px; color: #fff; letter-spacing: -5px; line-height: 120%; font-weight: 900;
	text-shadow: 0 3px 6px rgba(0,0,0, 0.4);
	
	}
.ESG-main-banner .Navi h1 .color {color: #b08ef6;}

.ESG-main-banner .Navi h2 {
	display: block;
	margin: 0 auto 70px auto;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic' sans-serif;
	font-size: 16px; color: #eee; line-height: 160%; font-weight: 300;
	text-shadow: 0 1px 0 rgba(0,0,0, 0.3);
	
	}
.ESG-main-banner .Navi h2 strong {display: block; margin: 0 0 10px 0; font-size: 25px; letter-spacing: -0.6px; font-weight: 500;}

.ESG-main-banner .Navi ul {display: inline-block;}
.ESG-main-banner .Navi li {
	float: left;
	margin: 0 20px 0 0;
	visibility: hidden;
	}
.ESG-main-banner .Navi li:last-child {margin-right: 0;}
.ESG-main-banner .Navi li a.item {
	display: block;
	position: relative; bottom: 0;
	width: 200px; height: 110px;
	padding: 0 2px 0 0;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic' sans-serif;
	font-size: 23px; color: #fff; letter-spacing: -1px; line-height: 150px; font-weight: 500; text-decoration: none !important; text-align: center;
	border: 1px solid rgba(255,255,255, 0.6);
	border-radius: 15px;
	transform: translate3d(0,0,0);
	box-shadow: 0 0 0 0 rgba(102,204,51, 0.4);
    transition: 0.2s all, box-shadow 0.4s ease-in-out;
	}
.ESG-main-banner .Navi li a.item::after {
	content: '';
	position: absolute; top: 20px; left: 23px;
	width: 31px; height: 12px;
	background: url('../../images/navi_icon2.png') no-repeat 0 0;
	}

.ESG-main-banner .Navi li a.item:hover {
	bottom: -5px;
	line-height: 110px;
	text-shadow: 0 3px 1px rgba(0,0,0, 0.1);
	border-color: transparent;
	background-color: rgba(102,204,51, 0.5);
	box-shadow: 0 0 0 25px transparent;
	}
.ESG-main-banner .Navi li a.item:hover::before {border-color: rgba(255,255,255, 0.3);}

.ESG-main-banner .Navi li a.item:hover::after {animation: ic_Ani 0.6s infinite;}
@keyframes ic_Ani {50% {top: 26px;}}

.ESG-main-banner .Navi li.map a.item {font-weight: 500;}
.ESG-main-banner .Navi li.map a.item span {
	display: inline-block;
	position: absolute; top: 43px; left: 50%;
	width: 90px; height: 18px; 
	margin: 0 0 0 -45px; padding: 0 0px 0 0;
	font-size: 13px; color: #fff; line-height: 18px; font-weight: 300; text-align: center;
	background: #0066cc;
	transition: 0.2s top;
	}
.ESG-main-banner .Navi li.map a.item:hover span {top: 25px;}

.ESG-main-banner .Navi li a.item .icon {
	display: block;
	position: absolute; top: -30px; right: -10px;
	width: 56px; height: 56px;
	padding: 11px 1px 0 0;
	font-size: 15px; color: #fff; line-height: 110%; font-weight: 300; text-align: center;
	border-radius: 100%;
	background: #e05555;
	box-shadow: 4px 4px 4px 0 rgba(0,0,0, 0.5);
	animation: icon_repeat_ani 0.8s infinite;
	}
@keyframes icon_repeat_ani {
	50% {top: -35px;}
	}

/*----- mouse Icon -----*/
.icon-scroll {
    position: absolute; bottom: -130px; left: 50%;
    width: 1em; height: 3.125em;
	margin: 0 0 0 3px;
    transform: translateX(-50%) scale(1.5);
	transition: opacity 0.3s;
    z-index: 11;
	visibility: hidden;
	}

.icon-arrows::after, .icon-arrows::before {content: '';}

.icon-arrows span, .icon-arrows::after, .icon-arrows::before {
    display: block;
	width: 0.315em; height: 0.315em;
	margin: 0 0 0.009em 0.315em;
    border-right: 1px solid rgba(255,255,255, 0.7);
    border-bottom: 1px solid rgba(255,255,255, 0.7);    
    transform: rotate(45deg);
    animation: mouse-scroll 1s infinite;
    animation-direction: alternate;
	}

.icon-arrows::before {margin-top: 0.315em; animation-delay: 0.1s;}
.icon-arrows::after  {animation-delay: 0.3s;}

.icon-scroll span {animation-delay: 0.2s;}

.icon-scroll .mouse {
    width: .875em; height: 1.375em;    
    border: 1px solid rgba(255,255,255, 0.7);
    border-radius: 2em;
	}

.icon-scroll .wheel {
    position: relative;
    display: block;
    width: 0.1875em; height: 0.1875em;
    margin: 0.1875em auto 0;
	border-radius: 50%;
    background: rgba(255,255,255, 0.9);
    animation: mouse-wheel 1.2s ease infinite;
	}

@keyframes mouse-wheel {
    0% {
        opacity: 1;
        transform: translateY(0);
		}
    100% {
        opacity: 0;
        transform: translateY(.375em);
		}
	}

@keyframes mouse-scroll {
    0%		{opacity: 0;}
    50%		{opacity: 0.5;}
    100%	{opacity: 1;}
	}



/********************************************************************************************************************************
* ºñ¿µ¸®¹ýÀÎÀÇ È¸°è
********************************************************************************************************************************/
.comm-frame.acc {
	background: #d7e4bd url('../../images/fr2_banner_esg.jpg') no-repeat 50% bottom;
	background-size: cover;
}

.comm-frame.acc .flow {
	position: relative;
	margin: -20px -20px 0 -20px;
	overflow: hidden;
	}

.comm-frame.acc .flow .line-txt {
	display: block;
	position: relative;
	width: 600px; height: 70px;
	margin: 0 auto 0 auto;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic';
	font-size: 23px; line-height: 70px; font-weight: 500; text-aligN: center;
	}
.comm-frame.acc .flow .line-txt::before, .comm-frame.acc .flow .line-txt::after {
	content: "";
	display: block;
	position: absolute; top: 50%; 
	width: 200px; height: 2px;
	background: #666;
	}
.comm-frame.acc .flow .line-txt::before {left: -10px;}
.comm-frame.acc .flow .line-txt::after	{right: -10px;}
.comm-frame.acc .flow .line-txt.line-None::before, .comm-frame.acc .flow .line-txt.line-None::after {display: none;}

.comm-frame.acc .flow .column {display: block; float: left; width: 50%; margin: 0 0 20px 0; padding: 0 20px;}
.comm-frame.acc .flow .column a {
	display: block;
	position: relative; bottom: 0;
	height: 70px;
	border-radius: 8px;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic';
	font-size: 23px; color: #fff; line-height: 70px; font-weight: 300; text-decoration: none; text-align: center;
	background: #dd608c url('../../images/acc_flow_icon.png') no-repeat 50% 50%;
	box-shadow: 0 3px 1px 0 rgba(0,0,0, 0.1);
	}
.comm-frame.acc .flow .column a:hover {bottom: -2px; background: #eb77a0 url('../../images/acc_flow_icon(hover).png') no-repeat 50% 50%;}
.comm-frame.acc .flow .column a::before {
	content: "";
	display: block;
	position: absolute; top: -35px; left: 50%;
	width: 2px; height: 35px;
	background: #666;
	}

.comm-frame.acc .flow .column.ct {float: none; width: 580px; margin: 0 auto 40px auto; padding: 0;}
.comm-frame.acc .flow .column.ct a::before {top: -15px; height: 15px;}

/*----- Table -----*/
.comm-frame.acc .tbl {
	width: 950px;
	margin: 0 auto 40px auto;
	border: 2px solid #dd608c;
	border-radius: 8px;
	overflow: hidden;
	}
.comm-frame.acc .tbl table {width: 100%; table-layout: fixed;}
.comm-frame.acc .tbl th {
	padding: 10px 0 10px 0;
	font-size: 14px; color: #450e21; line-height: 120%; font-weight: bold; text-align: center; vertical-align: middle;
	border-right: 1px solid rgba(221,95,140, 0.4); border-bottom: 1px solid rgba(221,95,140, 0.7);
	background: rgba(221,95,140, 0.4);
	}
.comm-frame.acc .tbl td {
	padding: 10px 0 10px 0;
	font-size: 15px; line-height: 160%; text-align: center; vertical-align: middle;
	border-right: 1px solid #deb0c0; border-bottom: 1px solid #deb0c0;
	background: #fff;
	}
.comm-frame.acc .tbl td.Left {padding-left: 12px; padding-right: 12px; text-align: left;}
.comm-frame.acc .tbl td a {display: inline-block; text-decoration: none;}

.comm-frame.acc .tbl tr:last-child td {border-bottom: none;}



/********************************************************************************************************************************
* ºñ¿µ¸®¹ýÀÎÀÇ ¼¼¹«
********************************************************************************************************************************/
.comm-frame.tax {padding-bottom: 70px; background: url('../../images/fr1_bg_bottom.png') no-repeat 0 bottom, url('../../images/fr1_bg_top.png') no-repeat right 0;}

/*----- ºñ¿µ¸®¹ýÀÎ ¹ýÀμ¼ ½Å°í¾È³» -----------------------------------------*/
.comm-frame.tax .singo-column {margin: 0 -15px 40px -15px; overflow: hidden;}
.comm-frame.tax .singo-column ul {float: left;}
.comm-frame.tax .singo-column li {float: left; width: 50%; margin: 0 0 25px 0; padding: 0 15px;}

.comm-frame.tax .singo-column li a {
	display: block;
	position: relative; bottom: 0;
	height: 70px;
	padding: 0 0 0 58px;
	border-top-right-radius: 8px; border-bottom-right-radius: 8px;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic';
	font-size: 20px; color: #fff; line-height: 70px; font-weight: 300; text-decoration: none;
	background: #624a95;
	}
.comm-frame.tax .singo-column li a:hover {bottom: -2px; background: #48288c;}
.comm-frame.tax .singo-column li a i {
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0;
	width: 35px;
	font-size: 20px; color: rgba(255,255,255, 0.5); line-height: 70px; text-align: center;
	background: #48288c;
	transition: all 0.2s;
	}
.comm-frame.tax .singo-column li a i::before {content: "\f105";}
.comm-frame.tax .singo-column li a:hover i {padding: 0 0 0 10px; background: #36245d;}


/*----- ±â°üº° ¼¼¹«½Ç¹« ¹× ȸ°è -----------------------------------------*/
.comm-frame.tax .agency-column {margin: 0 -10px; overflow: hidden;}
.comm-frame.tax .agency-column .cols {float: left; width: 25%; padding: 0 10px; text-align: center;}

.comm-frame.tax .agency-column .cols a {display: block; margin: 0 auto 40px auto; text-decoration: none; text-align: left !important; overflow: hidden;}
.comm-frame.tax .agency-column .cols a img			{width: 100%; height: auto; filter: grayscale(60%); transition: 0.2s ease-in-out;}
.comm-frame.tax .agency-column .cols a:hover img	{filter: grayscale(0%); transform: scale(1.05);}

.comm-frame.tax .agency-column .cols a .stit {
	display: inline-block;
	position: relative;
	margin: 18px 0 6px 0; padding: 0 0px;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic';
	font-size: 23px; color: #513096; line-height: 130%; font-weight: 700;
	}
.comm-frame.tax .agency-column .cols a .stit::after {
	content: "";
	display: inline-block;
	position: absolute; bottom: -2px; left: 0;
	width: 0%; height: 2px;
	background: #513096;
	transition: all 0.3s;
	z-index: 5;
	}
.comm-frame.tax .agency-column .cols a:hover .stit::after {width: 100%;}
.comm-frame.tax .agency-column .cols a .txt {
	display: block;
	display: -webkit-box;
	font-size: 13px; color: #555; letter-spacing: -0.5px; line-height: 140%;
	word-wrap: break-word; text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}



/********************************************************************************************************************************
* °ü·Ã Çؼ³
********************************************************************************************************************************/
.comm-frame.Haesul {border-top: 1px solid #e5e5e5; background: url('../../images/bg_pattern.gif');}



/********************************************************************************************************************************
* °ü·Ã µµ¼­ ¾È³»
********************************************************************************************************************************/
.comm-frame.Book {background: url('../../images/book_bg.jpg') no-repeat center 0; background-size: cover; z-index: 1;}
.comm-frame.Book .container-n {width: 1400px;}

.comm-frame.Book .book {
	position: relative;
	margin: 5px 0 0 0; padding: 45px 130px 45px 100px;
	background: #f7f7f7;	/* f2f0f7 */
	overflow: hidden;
	}
.comm-frame.Book .book .photo {
	float: left;
	display: inline-block;
	margin: 0 50px 0 0; padding: 15px 0;
	border: 1px solid #eee;
	background: #fff;
	}
.comm-frame.Book .book .photo img {width: 300px; height: auto;}

.comm-frame.Book .book .info {float: left; font-size: 15px; line-height: 120%;}
.comm-frame.Book .book .info span.subj {
	display: block;
	margin: 22px 0 15px 0;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic';
	font-size: 35px; letter-spacing: -1px; font-weight: 700;
	}
.comm-frame.Book .book .info span.subj .writer {font-size: 17px; letter-spacing: -0.5px; font-weight: 400;}

.comm-frame.Book .book .info span.price {
	display: block;
	width: 600px;
	margin: 15px 0 0 0; padding: 10px 0 13px 30px;
	font-size: 17px; letter-spacing: 0; line-height: 150%;
	border-top: 1px solid rgba(167,155,203, 0.5); border-bottom: 1px solid rgba(167,155,203, 0.5);
	background: rgba(167,155,203, 0.08);
	}
.comm-frame.Book .book .info span.price strong {color: #ff3710;}

.comm-frame.Book .book .info span.etc {
	display: block;
	width: 570px;
	padding: 9px 0 12px 30px;
	font-size: 17px; letter-spacing: 0; line-height: 150%;
	border-bottom: 1px solid rgba(167,155,203, 0.3);
	}
.comm-frame.Book .book .info .detail {
	display: block;
	margin: 12px 0 0 0;
	font-size: 13px; color: #777; line-height: 150%;
	}

.comm-frame.Book .book .Btns {position: absolute; top: 110px; right: 100px;}

.comm-frame.Book .book .Btns .Btn {
	display: block;	
	position: relative; bottom: 0;
	width: 180px; height: 80px;
	margin: 0 0 20px 0;
	font-size: 17px; color: #fff; line-height: 80px; text-decoration: none; text-align: center;
    border-radius: 6px;
    border-bottom: 3px solid transparent;
	background: #513c7c;
	border-bottom-color: #302547;
	transition: all 0.2s;
	}
.comm-frame.Book .book .Btns .Btn:hover {bottom: -2px; background: #6547a2;}
.comm-frame.Book .book .Btns .Btn.preview {background: #eb77a0; border-bottom-color: #a5647b;}


/********************************************************************************************************************************
* °Ô½ÃÆÇ
********************************************************************************************************************************/
.comm-frame.Boards.Bg {background: #f2f2f6 url('../../images/board_bg.jpg') no-repeat 50% bottom;
	background-size: cover;
	}


.comm-frame.Boards .column {margin: 0 -20px;}
.comm-frame.Boards .board-wp {float: left; width: 50%; padding: 0 20px;}

/*----- Board Style -----*/
.comm-frame .board-wp .tbl {position: relative; border-top: 1px solid #666; border-bottom: 1px solid #ccc;}
.comm-frame .board-wp .tbl.bg .list li {background-color: rgba(255,255,255, 0.7);}
.comm-frame .board-wp .tbl.ticker {height: 314px;}
.comm-frame .board-wp .tbl.ticker .list {height: 311px; overflow: hidden;}

.comm-frame .board-wp .tbl .list li {
	position: relative;
	height: 52px;
	border-bottom: 1px solid #e3e3e3;
	}
.comm-frame .board-wp .tbl .list li:last-child {border-bottom: none;}

.comm-frame .board-wp .tbl .list li a.subj {
	display: inline-block;
	max-width: 100%;
	padding: 0 0 0 5px;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic';
	font-size: 16.5px; letter-spacing: -0px; line-height: 50px; font-weight: 400; text-decoration: none;
	white-space: nowrap; text-overflow: ellipsis;
	overflow: hidden;
	}
.comm-frame .board-wp .tbl .list li a.subj.type1 {max-width: 490px;}
.comm-frame .board-wp .tbl .list li a.subj.type2 {max-width: 420px;}
.comm-frame .board-wp .tbl .list li a.subj.type3 {max-width: 330px;}
.comm-frame .board-wp .tbl .list li a.subj.type4 {max-width: 550px;}

.comm-frame.Haesul .board-wp .tbl .list li a.subj {padding-left: 34px; background: url('/pds/images/sub/acc/acc_subm_icon.png') no-repeat 0 15px;}

.comm-frame .board-wp .tbl .list li a.speech-bubble-icon {
	padding-left: 32px;
	background: url('../../images/speech_bubble.png') no-repeat 0 14px;
	}

.comm-frame .board-wp .tbl .list li span.date {
	display: inline-block;
	position: absolute; top: 50%; right: 5px;
	height: 30px;
	margin: -15px 0 0 0;
	font-size: 12px; color: #999; line-height: 29px;
	transition: all 0.3s;
	}
.comm-frame .board-wp .tbl .list li span.name {
	display: inline-block;
	position: absolute; top: 50%; right: 70px;
	width: 75px; max-width: 100%; height: 30px;
	margin: -15px 0 0 0;
	font-size: 13px; color: #777; line-height: 29px; text-align: center;
	white-space: nowrap; text-overflow: ellipsis;
	overflow: hidden;
	transition: all 0.3s;
	}
.comm-frame .board-wp .tbl .list li:hover span.date, .comm-frame .board-wp .tbl .list li:hover span.name {color: #000;}

.comm-frame .board-wp .tbl .list li span.file {
	display: inline-block;
	position: absolute; top: 50%; right: 5px;
	min-width: 22px; height: 22px;
	margin: -11px 0 0 0;
	text-align: center;
	}
.comm-frame .board-wp .tbl .list li span.file a {display: table-cell; padding-left: 3px;}
.comm-frame .board-wp .tbl .list li span.file img {display: inline-block; width: auto; height: 22px;}
.comm-frame .board-wp .tbl .list li span.file .data-None {margin-top: 4px; text-align: center;}

/* º¸µµÀÚ·á */
.comm-frame .board-wp .data .tbl .list li span.name {right: 165px;}
.comm-frame .board-wp .data .tbl .list li span.date {right: 90px;}

/* »ó´ã */
.comm-frame .board-wp .tbl .list li span.bIcon {position: absolute; top: 50%; right: 5px; margin: -12px 0 0 0;}
.comm-frame .board-wp .consult .tbl .list li span.name {right: 50px;}

/* °øÁö»çÇ× */
.comm-frame .board-wp .notice .tbl .list li span.date {right: 50px;}
.comm-frame .board-wp .notice .tbl .list li span.file {right: 10px;}

.comm-frame .board-wp .tbl .list li .kind-ic {
	display: inline-block;
	height: 18px;
	margin: -39px 0px 0 0; padding: 0 5px 0 5px;
	font-size: 11px; color: #fff; letter-spacing: -0.5px; line-height: 17px; text-align: center; vertical-align: middle;
	border-radius: 3px;
	background-color: #e05555;
	}




/*----- 樨毢(Media) -----*/
.comm-frame.Boards .media {
	column-count: 3; column-gap: 30px;
	margin: 0px 0 80px 0;
	}
.comm-frame.Boards .media a {display: block; position: relative; overflow: hidden;}
.comm-frame.Boards .media a::after {
	content: "";
	display: block;
	position: absolute; top: 50%; left: 50%;
	width: 60px; height: 60px;
	margin: -30px 0 0 -30px;
	background: url('../../images/media_playBtn.png') no-repeat 0 0;
	background-size: 60px auto;
	transform: scale(1);
	transition: all 0.2s;
	z-index: 3;
	}
.comm-frame.Boards .media a:hover::after {transform: scale(1.2);}

.comm-frame.Boards .media a img {display: block; width: 100%; height: 215px; transition: all 0.3s; transform: scale(1);}
.comm-frame.Boards .media a:hover img {transform: scale(1.05);}

.comm-frame.Boards .media .Lec-tabIcon {
	display: block;
	position: absolute; top: 10px; left: 10px;
	width: 48px; height: 48px;
	padding: 14px 0 0 0;
	font-size: 10px; letter-spacing: -1.5px; color: rgba(255,255,255, 0.9); line-height: 110%; text-align: center;
	border-radius: 100%;
	background: #896fc2;
	box-shadow: 0 2px 1px 0 rgba(0,0,0, 0.15);
	z-index: 5;
	}



/********************************************************************************************************************************
* ±âŸ
********************************************************************************************************************************/
.jarallax {
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	}

@media screen and (max-width: 991px){
	.jarallax {
		background-size: cover !important;
		background-attachment: fixed !important;
		}
	}


/*----- modal ------------------------------*/
/* ºñ¿µ¸®¹ýÀÎÀÇ È¸°è¿Í ¼¼¹« ¿Â¶óÀÎ °úÁ¤ */
.pop-div.modal-media .pop-wrap	{width: 1050px !important; height: 677px !important; margin: -395px 0 0 -525px !important;}
.pop-div.modal-media .pop-wrap .video-wp {width: 1000px; margin: 25px auto 0 auto; border-radius: 0; box-shadow: none;}
.pop-div.modal-media .pop-wrap .video-summary {
	position: relative;
	width: 1000px;
	margin: 25px auto 0 auto; padding: 20px 20px 20px 20px;
	font-size: 13px; line-height: 140%;
	border: 1px solid #ddd;
	background: #f3f3f3;
	}
.pop-div.modal-media .pop-wrap .video-summary strong {display: block; margin: 0 0 5px 0;}
.pop-div.modal-media .pop-wrap .video-summary a {position: absolute; top: 50%; right: 20px; margin: -22.5px 0 0 0;}


/*----- modal(Çؼ³¿ë)  ------------------------------*/
/* Çؼ³ Reset */
.haesul-view-wp.ESG {width: 1180px; margin: 0; padding: 55px 50px 0 50px; border: none;}

.pop-div.ESG .pop-wrap {top: 0; width: 1200px; height: 100vh; margin: 0 0 0 -600px;}
.pop-div.ESG .pop-wrap iframe {width: 100%; height: 100%;}


/*----- esg css ½ÃÀÛ 210617  ------------------------------*/
.comm-frame .container-n .esg_explain{
	clear:both;
	width:1000px;
	margin:0 auto;
}
.comm-frame .container-n .esg_explain .explain_box {
	width:32%;
	float:left;
	margin-right:20px;
	
	
}
.comm-frame .container-n .esg_explain .explain_box:nth-child(3) {
	margin-right:0px;
	
	
}
.comm-frame .container-n .esg_explain .explain_box:after {
	content:"";
	width:5px;
	height:50px;
	background:#898989;
	display:block;
	margin:10px auto 0;
	
}
.comm-frame .container-n .esg_explain .explain_box .inner{
	border:1px solid #d2d2d2;
	width:100%;
	position:relative;
}
.comm-frame .container-n .esg_explain .explain_box .inner .top_list{
	position:relative;
}

.comm-frame .container-n .esg_explain .explain_box .inner:hover .category ul {
	color:#339933;
}


.comm-frame .container-n .esg_explain .explain_box .explain_img{
	width:100%;
	height:100%;
	position:relative;
	
}
.comm-frame .container-n .esg_explain .explain_box .explain_img img{
	width:100%;
	height:100%;
	
	
}
.comm-frame .container-n .esg_explain .explain_box .explain_img:after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background:rgba(0,0,0,0.3);
	
	
}



.comm-frame .container-n .esg_explain .explain_box .explain_subj{
	font-size:24px;
	text-align:center;
	line-height:45px;
	position:absolute;
	top:35%;
	left:50%;
	z-index:2;
	color:#fff;
	transform: translateX(-50%);
	
}

.comm-frame .container-n .esg_explain .explain_box .explain_subj b{
	color:#339933;
	font-size:40px;
}

.comm-frame .container-n .esg_explain .explain_box .category{
	border-top:1px solid #d2d2d2;
	background:#fff;
	text-align:left;
	padding:2%;
	
}

.comm-frame .container-n .esg_explain .explain_box .category ul li{
	line-height:26px;
	font-size:17px;
	color:#111;
	margin-left:15px;
}
.comm-frame .container-n .esg_explain .explain_box .category ul li span{
	font-size:25px;
	display:inline-block;
	
	
}
.comm-frame .container-n .esg_explain .explain_box .inner:hover{
	border:1px solid #339933;
	
}

.comm-frame .container-n .esg_explain .explain_box .inner:hover li{
	color:#339933;
	
}


.comm-frame .container-n .esg_explain .explain_box .down_arrow{
	margin:0 auto;
	width:70px;
	animation: d_a 0.5s ease infinite alternate;
	position:relative;
	top:0;
	
}
.comm-frame .container-n .esg_explain .explain_box .down_arrow img{
	text-align:center;
	width:100%;
	
}


@keyframes d_a {
  100% {
    top: 5px;
    
  }
}

.comm-frame .container-n .esg_explain .explain_box h4{
	font-size:26px;
	text-align:center;
	font-weight:bold;
	margin-top:10px;
}
.comm-frame .container-n .esg_explain .conclusion{
	background:#339933;
	width:290px;
	height:65px;
	font-size:28px;
	font-weight:bold;
	text-align:center;
	line-height:65px;
	margin:0 auto ;
	color:#fff;
	
}

.comm-frame .container-n .esg_explain .line:after{
	content:"";
	width:5px;
	height:50px;
	background:#898989;
	display:block;
	margin:0 auto;
	
}
.comm-frame .container-n .esg_explain .line:before{
	content:"";
	width:685px;
	height:4px;
	background:#898989;
	display:block;
	margin:0 auto;
	
}

.comm-frame .container-n .esg_question{
	position: relative; bottom: 0;
    width: 1000px;
	margin: 50px auto 0; padding: 12px 25px;
    font-size: 15px; color: #111; letter-spacing: -0.5px; line-height: 150%;
/*    border: 3px dashed #898989;
    border-radius: 5px;
*/
    background: rgba(255,255,255, 0.5);
   }

  
.comm-frame .container-n .esg_question .e_q {float: right; font-size: 12px;}
.comm-frame .container-n .commentary li{
	float:left;
	width:380px;
	margin-right:20px;
	border:1px solid #e5e5e5;
}
.comm-frame .container-n .commentary li:nth-child(3n){
	
	margin-right:0px;
	
}
.comm-frame .container-n .commentary li .commentary_img{
	width:100%;
	height:180px;
	background:#e5e5e5;
	overflow:hidden;

	
	
}
.comm-frame .container-n .commentary li:hover .commentary_img img{
	transform:scale(1.05);
	transition:all 0.3s;
	
}
.comm-frame .container-n .commentary li a:hover{
	text-decoration:none;
	color:#9bbb59;
}


.comm-frame .container-n .commentary li span{
	text-align:center;
	display:block;
	font-size:18px;
	line-height:50px;
}
.comm-frame .container-n .accounting_list{
	margin-top:40px;
}


.comm-frame .container-n .data ul li a{
	display: block;
    position: relative;
    bottom: 0;
    height: 70px;
    padding: 0 0 0 40px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic';
    font-size: 22px;
    color: #fff;
    line-height: 70px;
    font-weight: 400;
    text-decoration: none;
    background: #66cc33;
	width:580px;
	text-align:center;
}

.comm-frame .container-n .data ul li a i{
	display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35px;
    font-size: 20px;
    color: rgba(255,255,255, 0.5);
    line-height: 70px;
    text-align: center;
    background: #339933;
    transition: all 0.2s;
}
.comm-frame .container-n .data ul li a:hover i{

    background: #2d842d;
   
}
.comm-frame .container-n .data ul li a:hover{
	bottom: -2px;
    background: #58b12c;
}

.V_i{
	background: url('../../images/v_i_bg.jpg') no-repeat;
	background-position:center center;
	background-size:100%;
	
}
.V_i .container-n{
	
	margin:0 auto;
	
}
.V_i .container-n .title h3 {
	color:#fff;
	
}
.comm-frame .container-n .Video_list{
	background:#fff;
	width:750px;
	margin:0 auto;
	padding:5%;
	border-radius:5px;
	background-position: bottom 0 right 0;
	
}

.comm-frame .container-n .Video{
	width:500px;
	margin:0 auto;
}
.comm-frame .container-n .Videos .video_box .a_img_list{
	position:relative;
	cursor:pointer;
}
.comm-frame .container-n .Videos .video_box .a_img_list .play_img{
	position:absolute;
	top:25%;
	left:50%;
	width:130px;
	transform:translateX(-50%);
}
.comm-frame .container-n .Videos .video_box .a_img_list .play_img img{
	width:100%;
}
.comm-frame .container-n .Videos .video_box .about_img{
	width:100%;
	border:1px solid #d2d2d2;
	overflow:hidden;
	cursor:pointer;
}
.comm-frame .container-n .Videos .video_box div img{
	width:100%;
	
	
}
.comm-frame .container-n .Videos .video_box div a:hover img{
	transform:scale(1.05);
	transition: all 0.3s;
	
}


.comm-frame .container-n .Videos .video_box span{
	letter-spacing:-0.7px;
	word-break:keep-all;
	font-size:13px;
	margin-top:15px;
	display:block;
	text-align:center;
	
	
}




.comm-frame .container-n .Video_list .Video .explain{
	font-size:20px;
	letter-spacing:-0.7px;
	word-break:keep-all;
	line-height:30px;
	border-bottom:1px solid #339933;
	border-top:1px solid #339933;
	padding:3% 0;
	margin-top:15px;
}
.comm-frame .container-n .Video_explain .modal {
	font-size:15px;
	letter-spacing:-0.7px;
	word-break:keep-all;
	display:block;
	background:#339933;
	width:165px;
	padding:2%;
	cursor:pointer;
	text-align:center;
	color:#fff;
	border-radius:5px;
	margin-top:10px;
	
}



.comm-frame .container-n .Video_explain .explain .modal:hover{
	color:#339933;
	border:1px solid #339933;
	background:#fff;
	
}
.comm-frame .container-n .Video_explain .explain .modal:hover a{
	color:#66cc33;
	text-decoration:none;
	
	
}
.comm-frame .container-n .N_S {
	margin-top:50px;
}
.comm-frame .container-n .Note_Site li a i.icon01 {
    width: 90px;
    margin-top: -22px;
    border: 1px solid #537b93;
    background:#fff url(../../images/Site_icon_01.png) no-repeat center center;
    background-size: auto 24px;
}
.comm-frame .container-n .Note_Site li a i.icon02 {
    width: 90px;
    margin-top: -22px;
    border: 1px solid #537b93;
    background:#fff url(../../images/Site_icon_02.png) no-repeat center center;
    background-size: auto 24px;
}

.comm-frame .container-n .Note_Site li a i.icon03 {
    width: 90px;
    margin-top: -22px;
    border: 1px solid #537b93;
    background:#fff url(../../images/Site_icon_03.png) no-repeat center center;
    background-size: auto 24px;
}

.comm-frame .container-n .Note_Site li a i.icon04 {
    width: 90px;
    margin-top: -22px;
    border: 1px solid #537b93;
    background:#fff url(../../images/Site_icon_04.png) no-repeat center center;
    background-size: auto 24px;
}
.comm-frame .container-n .Note_Site .Site_txt{
    width:306px;
	
	
}
.comm-frame .container-n .Note_Site .Site_txt:last-child{
    padding:0;
	
	
}
.comm-frame .container-n .Note_Site .Site_txt a span{
	margin-left:35px;
	margin-top:13px;
	display:inline-block;
	
}
.comm-frame .container-n .Note_Site .Site_txt a span.mg_plus01{
    margin-left:60px;
	
	
	
}
.comm-frame .container-n .Note_Site .Site_txt a span.mg_plus02{
    margin-left:40px;
	
	
	
}



.Note_Site li a:hover i.more {
    color: #66cc33;
}

/*----- esg Çì´õ ------------------------------*/
.m_control {
	bottom:0;
}
.ESG-main-banner .Navi .h_subj_icon {
	width:100%;
	line-height:100%;
	margin-top:-50px;
}
.ESG-main-banner .Navi .h_subj_icon span{
	 position: relative;
	  top: 20px;
	  display: inline-block;
	  animation: esg_bounce .3s ease infinite alternate;
	  font-size: 180px;
	  color: #66cc33;
	  text-shadow: 0 1px 0 #339933,
               0 2px 0 #339933,
               0 3px 0 #339933,
               0 4px 0 #339933,
               0 5px 0 #339933,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(51,153,51, 0.4);
	
	 font-weight:900;
	
	
}
.ESG-main-banner .Navi .h_subj_icon span:nth-child(2) { animation-delay: .1s; }
.ESG-main-banner .Navi .h_subj_icon span:nth-child(3) { animation-delay: .2s; }

@keyframes esg_bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #339933,
                 0 2px 0 #339933,
                 0 3px 0 #339933,
                 0 4px 0 #339933,
                 0 5px 0 #339933,
                 0 6px 0 #339933,
                 0 7px 0 #339933,
                 0 8px 0 #339933,
                 0 9px 0 #339933,
                 0 50px 25px rgba(51,153,51, 0.2);
  }
}

.ESG-main-banner .Navi ul {
	width:60%;
	
}
.ESG-main-banner .Navi li {
    float: left;
    visibility: hidden;
	width:31.333333%;
	
	
}
/*-----
.ESG-main-banner .Navi ul li:hover a{
   background: rgba(102,204,51,0.5);
}---------*/
.ESG-main-banner .Navi li a.n_h_menu {
	width:100%;
	display: block;
    position: relative;
    bottom: 0;
    height: 160px;
    font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic' sans-serif;
    font-size: 23px;
    color: #fff;
    letter-spacing: -1px;
    font-weight: 500;
    text-decoration: none !important;
    text-align: center;
   
    transform: translate3d(0,0,0);
    box-shadow: 0 0 0 0 rgb(102 204 51 / 40%);
    transition: 0.2s all, box-shadow 0.4s ease-in-out;

}
.ESG-main-banner .Navi li a.n_h_menu:hover {
	
    color: #66cc33;
   

}
.ESG-main-banner .Navi li a.n_h_menu:after {
	width:100%;
	display: block;
    background:#fff;
	content:"";
	height:2px;
	margin-top:15px;
}
.ESG-main-banner .Navi li a.n_h_menu:hover:after {
	width:100%;
	display: block;
    background:#66cc33;
	content:"";
	height:2px;
	margin-top:15px;
}






/*----- esg ½½¶óÀÌ´õ  ------------------------------*/

.comm-frame .container-n .haesul-esg {width:100%;}
.comm-frame .container-n .haesul-esg a {display: block; text-decoration:none;}

.comm-frame .container-n .haesul-esg .haesul_esg_video {margin-right:20px; border: 1px solid transparent}
	.comm-frame .container-n .haesul-esg .haesul_esg_video:hover {border-color: rgba(0,0,0, 0);}
.comm-frame .container-n .haesul-esg .haesul_esg_video .esg_video_img{
    width:100%; height: 180px;
	overflow:hidden;

}
.comm-frame .container-n .haesul-esg .haesul_esg_video .esg_video_img img{
    display: inline;
	width: 100%; min-height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
	
	
}
.comm-frame .container-n .haesul-esg .haesul_esg_video:hover img{
	
	transform:scale(1.05);
	transition:all 0.3s;
	
	
	
}

.comm-frame .container-n .haesul-esg .haesul_esg_video .haesul_txt span{
	display: -webkit-box;
	margin: 10px 0 0 0;
	text-align:center;
	line-height: 150%;
	font-size: 24px; letter-spacing: -1.5px;
	line-height:70px;
	font-weight:700;
	-webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	
	
}
.comm-frame .container-n .haesul-esg .haesul_esg_video .haesul_txt .subj_heasul{
	display: -webkit-box;
	text-align:left;
	line-height: 150%;
	margin:0 10px 10px 10px;
	cursor:pointer;
	font-size:14px;
	letter-spacing:-0.3px;
	text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
	overflow: hidden;
	word-wrap: break-word;
	color:#aaa;
	
}
.comm-frame .container-n .haesul-esg .haesul_esg_video:hover .haesul_txt{
	color:#339933;
}
.haesul-esg-box .swiper-button-prev, .haesul-esg-box .swiper-button-next {
    margin-top: -50px !important; 
    
}
.haesul-esg-box .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: -30px;
    left: auto;
}
.haesul-esg-box .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    left: -50px;
    right: auto;
}