﻿html { margin: 0; padding: 0; font-family: 'notokr-medium' }
body { margin: 0; padding: 0; font-family: 'notokr-medium'; overflow-y: scroll; }
b, strong, h1, h2, h3 { }
hr, .blind { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -100%; font-size: 0; line-height: 0; }
caption { color: #fff }
aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { color: #232323; font-family: 'notokr-medium' }
div, ul, li, td, tr { }
ul, li, dl, dt, dd { margin: 0px; padding: 0px; list-style-type: none; }
h1, h2, h3, h4, h5, h6 { margin: 0px; padding: 0px; font-weight: normal; }
td, tr, th { border-bottom: 1px solid #dbdbdb; }

a { text-decoration: none; cursor: pointer; }
	a:link { color: #000; }
	a:hover { color: #000; text-decoration: none; }
	a:visited { color: #000; }
	a:hover { color: #000; }
.button { font-style: normal; color: black; height: 18px; background-color: #CDDEE7; border-width: 1px; border-color: #6a6a6a; border-style: solid; padding-top: 1px; }
caption, hr { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -100%; font-size: 0; line-height: 0; padding: 0; margin: 0 }
img { border: 0; vertical-align: middle; }
form { display: inline; margin: 0px; }
input { border: 1px solid #b8b8b8; padding: 2px; }
checkbox { border: 0 !important }
select { border: 1px solid #7f9db9; line-height: 18px; padding: 3px; }
strong { font-weight: normal !important;; color: #333333 }

.txt_left { text-align: left !important; }
.txt_right { text-align: right !important; }
table.tblList th { background-color: #2a3a75; }



@keyframes scrollMove {
	0% { opacity: 0; }
	40% { opacity: 1; }
}

.tbl_div {
	border-top: 2px solid #000000;
    width: 100%;
}

.esg_table th {
	font-size: 16px;
	font-weight: 500;
	color: #111111;
	letter-spacing: -.3px;
	height: 40px;
	background: #fafafa;
	border: 1px solid #e6e6e6;
	padding: 0 10px;
	text-align: center;
}

.esg_table td {
	font-size: 16px;
	color: #666666;
	letter-spacing: -.3px;
	height: 40px;
	border: 1px solid #e6e6e6;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
}




header { position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 2; }

.header_wrap {
	padding: 25px 15px 0;

	& .header_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		z-index: -999;
		background-color: #0d335d;
		animation: scrollMove 0.1s;
		animation-timeline: scroll();
	}

	& .menu_wrap {
		max-width: 1400px;
		margin: 0 auto;
		position: relative;

		& .logo {
			position: absolute;
			top: 0px;
			left: 0;
			
			& a {
				display: block;
				font-size: 0;
				width: 266px;
				height: 70px;
				background: url(/img/tng_header_logo_white.png) no-repeat 0 0;
			}
		}

		& .gnb_wrap {
			padding-left: 400px;

			& ul {
				display: flex;
				text-align: center;

				& li {
					display: inline-block;
					width: 100%;
					vertical-align: top;
					padding-top: 15px;

					& a {
						display: block;
						padding: 0 30px;
						font-size: 18px;
						font-weight: 700;
						line-height: 75px;
						color: #fff;
						text-transform: uppercase;
					}

					& a:hover {
						color: #00bcd4;

						& span {
							position: relative;
						}

						& span:before {
							position: absolute;
							bottom: -5px;
							width: 100%;
							height: 1px;
							content: '';
							background: #00bcd4;
						}
					}
				}
			}
		}
	}
}


.main { z-index: 1; clear: left; position: relative; width: 1400px; margin: 50px auto 0 auto; padding: 0 0 50px 0; }

	.main .esg_content_box_800 { width: 800px; margin: 0 auto; text-align: center; font-family: 'Noto Sans KR', sans-serif; font-size: 17px; color: #666; letter-spacing: -1px; line-height: 1.6em; font-weight: 400; }

	.main .esg_content_box { width: 1400px; margin: 0 auto; text-align: center; font-family: 'Noto Sans KR', sans-serif; font-size: 17px; color: #666; letter-spacing: -1px; line-height: 1.6em; font-weight: 400; }

.content_header { font-size: 30px; font-weight: bold; color: #000000; text-align: center; padding-top: 40px; margin-bottom: 50px; background-imagexx: url('/img/hd_bullet.png'); background-repeat: no-repeat; background-position: center top; }

.content_img_box { margin: 50px 0; text-align: center; box-sizing: border-box; border: 1px solid #ddd; padding: 20px 5px; }

.main .content_esg_file { margin-top: 30px; }

.wrap_box { margin-bottom: 15px; }

	.wrap_box:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

.esg_header { font-family: NanumGothic; font-size: 24px; padding: 0; margin: 0.5em 0; color: #555; text-align: left !important; }

	.esg_header:before { content: ''; display: inline-block; width: 0.48em; height: 1.2em; margin-right: 0.3em; background: #2a3a75; vertical-align: middle; }



.container_box_50 { float: left; width: 50px; }

.container_box_720 { float: left; width: 720px; text-align: left; }

.container_box_1350 { float: left; width: 1350px; text-align: left; }

.container_box_49p { width: 49%; float: left; }

	.container_box_49p + .container_box_49p { margin-left: 2%; }


#esgCurrent { text-align: center; }
.esg_down_btn { font-size: 18px; color: #000; line-height: 60px; text-align: center; cursor: pointer; background-color: #f9f9f9; border-bottom: 1px solid #1d2088; height: 60px; }
	.esg_down_btn:hover { border-bottom: 1px solid #e60012; }


.safety_ul { display: block; width: 100%; padding: 35px 30px; box-sizing: border-box; }

	.safety_ul li { display: block; position: relative; width: 100%; padding: 2px 0 2px 10px; box-sizing: border-box; color: #555; line-height: 32px; }




footer { position: relative; width: 100%; padding-top: 10px; border-top: 1px solid #eae6e5; background: #f2f2f2; height: 100px; }

	footer .footer { position: relative; width: 1000px; margin: 0 auto; }

	footer .footer_logo { width: 300px; float: left; text-align: right; }

	footer address { position: relative; float: right; width: 66%; padding-top: 18px; padding-left: 10px; color: #535353; font-size: 14px; font-style: normal; line-height: 22px; padding-bottom: 10px; }

		footer address span { color: #d3d3d3; font-size: 80%; padding-left: 20px; padding-right: 20px; }
