/*
	Copyright 2020 Raonbnp
	http://raonbnp.com, http://raonwebstore.com
*/
@charset "UTF-8";
@import '/_css/common.css'; /* front, admin 공통*/
@import '/_css/member.css'; /* front member 공통*/
@import '/_css/board.css'; /* front member 공통*/
@import 'loading.css';
@import 'fontSet.css';
@import 'basic.css';
@import 'layout.css';
@import 'style.css';


/* 서브공통 */
.sub0201 .bg {
	background-image:url('../_img/sub/sv_esg.jpg') !important;
}
#sub_wrap {
	box-sizing:border-box;
	padding:12rem 0;
}
#sub_wrap h2.sub-title {
	text-align:center;
	font-size:5rem;
	font-weight:400;
	color:#222;
	margin-bottom:4rem;
}
#sub_wrap p.sub-title {
	font-size:2.4rem;
	color:#222;
	margin-bottom:8rem;
	font-weight:200;
}
@media (max-width: 991.98px) {
	#sub_wrap {
		padding:6rem 0;
	}
	#sub_wrap h2.sub-title {
		font-size:2.8rem;
		margin-bottom:2rem;
	}
	#sub_wrap p.sub-title {
		font-size:1.8rem;
		margin-bottom:4rem;
	}
}
.sub-wrap > section {
	position:relative;
	box-sizing:border-box;
	overflow:hidden;
	padding:15rem 0;
}
.sub-wrap > section:last-child {
		padding:15rem 0 0;
	}
.sub-wrap .title {
	color:#222;
}
.sub-wrap .title > h3 {
	font-size:4rem;
	font-weight:400;
}
.sub-wrap .title > p {
	font-size:2.4rem;
	font-weight:400;
	margin-top:2rem;
	line-height:1.8;
}
@media (max-width: 991.98px) {
	.sub-wrap > section {
		padding:6rem 0;
	}
	.sub-wrap > section:last-child {
		padding:6rem 0 0;
	}
	.sub-wrap .title > h3 {
		font-size:2.4rem;
	}
	.sub-wrap .title > p {
		font-size:2rem;
		margin-top:1rem;
		line-height:1.6;
	}
}



/* bm flow */
.bmflow-wrap .sec01 {
	margin-top:8rem;
	padding:0;
}
.bmflow-wrap .sec01 .flex {
	position:relative;
	display:flex;
	flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	align-items:center;
	height:65rem;
}
.bmflow-wrap .sec01 .flex .img {
	position:absolute;
	left:50%;
	top:0;
	width:50%;
	height:100%;
}
.bmflow-wrap .sec01 .flex .inner {
	box-sizing:border-box;
	padding-right:calc(50% + 8rem);
}
.bmflow-wrap .sec01 .flex .inner .desc {
	font-size:1.6rem;
	color:#495b5d;
}
.bmflow-wrap .sec01 .flex .inner h3 {
	font-size:4rem;
	font-weight:400;
	color:#222;
	margin-top:2rem;
}
.bmflow-wrap .sec01 .flex .inner h3 > .green {
	color:var(--green-color);
}
.bmflow-wrap .sec01 .flex .inner p {
	font-size:1.8rem;
	line-height:1.8;
	margin-top:4rem;
}
.bmflow-wrap .sec01 .flex.type02 {
	flex-direction:row-reverse;
}
.bmflow-wrap .sec01 .flex.type02 .img {
	left:0;
}
.bmflow-wrap .sec01 .flex.type02 .inner {
	padding-left:calc(50% + 8rem);
	padding-right:0;
}
@media (max-width: 1280px) {
	.bmflow-wrap .sec01 .flex .inner {
		padding-right:calc(50% + 4rem);
	}
	.bmflow-wrap .sec01 .flex.type02 .inner {
		padding-left:calc(50% + 4rem);
	}
}
@media (max-width: 991.98px) {
	.bmflow-wrap .sec01 {
		margin-top:4rem;
	}
	.bmflow-wrap .sec01 .flex {
		display:block;
		height:auto;
	}
	.bmflow-wrap .sec01 .flex .img {
		position:relative;
		left:0;
		top:0;
		width:100%;
		height:40rem;
		margin-top:2rem;
	}
	.bmflow-wrap .sec01 .flex .inner {
		padding-right:0;
	}
	.bmflow-wrap .sec01 .flex .inner .desc {
		font-size:1.4rem;
	}
	.bmflow-wrap .sec01 .flex .inner h3 {
		font-size:2.6rem;
		margin-top:1rem;
	}
	.bmflow-wrap .sec01 .flex .inner p {
		font-size:1.8rem;
		line-height:1.6;
		margin-top:1rem;
	}
	.bmflow-wrap .sec01 .flex.type02 {
		margin-top:4rem;
	}
	.bmflow-wrap .sec01 .flex.type02 .img {
		left:0;
	}
	.bmflow-wrap .sec01 .flex.type02 .inner {
		padding-left:0;
	}
}
@media (max-width: 575.98px) {
	.bmflow-wrap .sec01 .flex .img {
		height:28rem;
	}
}


.bmflow-wrap .sec02 {
	background:#121212;
}
.bmflow-wrap .sec02 .title {
	color:#fff;
}
.bmflow-wrap .sec02 .img-box {
	text-align:center;
	position:relative;
	margin-top:9rem;
}
.bmflow-wrap .sec02 .img-box > .txt-box {
	position:absolute;
	text-align:center;
	color:#fff;
	font-size:2rem;
	font-weight:200;
}
.bmflow-wrap .sec02 .img-box > .txt-box > p.tit {
	font-size:2.2rem;
	font-weight:400;
	color:var(--green-color);
}
.bmflow-wrap .sec02 .img-box > .txt-1 {
	left:50%;
	margin-left:-35%;
	top:10%;
}


.bmflow-wrap .sec03 .flex {
	display:flex;
	flex-wrap:wrap;
	-ms-flex-wrap:wrap;
}
.bmflow-wrap .sec03 .flex > div {
	max-width:50%;
	flex:0 0 50%;
}
.bmflow-wrap .sec03 .flex > .lt {
	box-sizing:border-box;
	padding-right:8rem;
}
.bmflow-wrap .sec03 .history-box {
	position:relative;
	box-sizing:border-box;
	top:6rem;
}
.bmflow-wrap .sec03 .history-box:before {
	content:"";
	position:absolute;
	width:1px;
	height:calc(100% - 2rem);
	left:1rem;
	top:1rem;
	background:#eee;
}
.bmflow-wrap .sec03 .history-box > .history {
	box-sizing:border-box;
	position:relative;
	padding-left:5rem;
	margin-bottom:4rem;
}
.bmflow-wrap .sec03 .history-box > .history:before {
	content:"";
	position:absolute;
	left:0;
	top:1rem;
	width:2rem;
	height:2rem;
	box-sizing:border-box;
	border:5px solid var(--green-color);
	border-radius:50%;
	background:#fff;
	z-index:10;
}
.bmflow-wrap .sec03 .history-box > .history > h3 {
	font-size:3.6rem;
	font-weight:600;
	color:var(--green-color);
	margin-bottom:2rem;
}
.bmflow-wrap .sec03 .history-box > .history > dl {
	box-sizing:border-box;
	margin:1rem 0;
	display:flex;
	flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	align-items:flex-wrap;
}
.bmflow-wrap .sec03 .history-box > .history > dl > dt {
	max-width:12rem;
	flex:0 0 12rem;
}
.bmflow-wrap .sec03 .history-box > .history > dl > dd {
	--wid:calc(100% - 12rem);
	max-width:var(--wid);
	flex:0 0 var(--wid);
}
.bmflow-wrap .sec03 .history-box > .history > dl > dt,
.bmflow-wrap .sec03 .history-box > .history > dl > dd {
	font-size:1.8rem;
	font-weight:400;
	line-height:1.8;
	color:#222;
}
.bmflow-wrap .sec03 .history-box > .history > dl > dt {
	font-weight:500;
}

@media (max-width: 1280px) {
	.bmflow-wrap .sec03 .flex > .lt {
		box-sizing:border-box;
		padding-right:4rem;
	}
}
@media (max-width: 991.98px) {
	.bmflow-wrap .sec03 .flex {
		display:block;
	}
	.bmflow-wrap .sec03 .flex > div {
		max-width:100%;
		flex:0 0 100%;
	}
	.bmflow-wrap .sec03 .flex > .lt {
		padding-right:0;
	}
	.bmflow-wrap .sec03 .history-box {
		top:0;
		margin-top:3rem;
	}
	.bmflow-wrap .sec03 .history-box:before {
		left:0.9rem;
		height:calc(100% - 1rem);
	}
	.bmflow-wrap .sec03 .history-box > .history {
		padding-left:3rem;
		margin-bottom:3rem;
	}
	.bmflow-wrap .sec03 .history-box > .history:before {
		width:1.8rem;
		height:1.8rem;
		border:4px solid var(--green-color);
		top:0.5rem;
	}
	.bmflow-wrap .sec03 .history-box > .history > h3 {
		font-size:2.4rem;
		margin-bottom:1rem;
		padding-top:0.2rem;
	}
	.bmflow-wrap .sec03 .history-box > .history > dl > dt {
		max-width:10rem;
		flex:0 0 10rem;
	}
	.bmflow-wrap .sec03 .history-box > .history > dl > dd {
		--wid:calc(100% - 10rem);
	}
	.bmflow-wrap .sec03 .history-box > .history > dl > dt,
	.bmflow-wrap .sec03 .history-box > .history > dl > dd {
		font-size:1.6rem;
	}
}

.bmflow-wrap .sec04 {
	background:#edf8ff;
}
@media (max-width: 991.98px) {
	.bmflow-wrap .sec05 .row {
		margin-left:-1rem;
		margin-right:-1rem;
	}
	.bmflow-wrap .sec05 .row > div[class^='col-'] {
		margin-bottom:2rem;
		padding-left:1rem;
		padding-right:1rem;
	}
	.bmflow-wrap .sec05 .row > div[class^='col-']:last-child {
		margin-bottom:0;
	}
}


/* 히스토리 */
.history-wrap section:last-child {
	padding:0;
}
.history-wrap .sec01 .row > div[class^='col-'] {
	margin-bottom:4rem;
}
.history-wrap .sec01 .row > div[class^='col-'] > .img {
	display:flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	border:1px solid #eee;
	height:15rem;
	padding:2rem;
}
@media (max-width: 1199.98px) {
	.history-wrap .sec01 .row {
		margin-left:-1rem;
		margin-right:-1rem;
	}
	.history-wrap .sec01 .row > div[class^='col-'] {
		padding-left:1rem;
		padding-right:1rem;
		margin-bottom:2rem;
	}
}
@media (max-width: 991.98px) {
	.history-wrap .sec01 .row > div[class^='col-'] > .img {
		height:10rem;
	}
}


.location-wrap section:last-child {
	padding:0;
}
.location-wrap .sec01 .map {
	height:50rem;
	box-sizing:border-box;
	border:1px solid #ddd;
}
.location-wrap .sec01 .map > iframe {
	width:100%;
	height:100%;
}
.location-wrap .sec01 .info {
	margin-top:3rem;
	background:#141414;
	color:#fff;
	box-sizing:border-box;
	padding:2rem 4rem;
	display:flex;
	align-items:center;
}
.location-wrap .sec01 .info > .img {
	max-width:22%;
	flex:0 0 22%;
	text-align:center;
	box-sizing:border-box;
	padding-right:4rem;
}
.location-wrap .sec01 .info > .img > img {
	width:100%;
	max-width:18rem;
}
.location-wrap .sec01 .info > .txt {
	max-width:78%;
	flex:0 0 78%;
}
.location-wrap .sec01 .info > .txt > div {
	display:flex;
	align-items:center;
	font-size:1.8rem;
	font-weight:300;
	margin:1.8rem 0;
}
.location-wrap .sec01 .info > .txt > div > strong {
	display:inline-block;
	box-sizing:border-box;
	padding:0.6rem 3rem;
	border-radius:3rem;
	background:#474747;
	font-weight:600;
	text-align:center;
	margin-right:1.5rem;
}
.location-wrap .sec01 .info > .txt > div.flex > div {
	margin-right:4rem;
	display:flex;
	align-items:center;
}
.location-wrap .sec01 .info > .txt > div.flex > div > strong {
	display:inline-block;
	width:4rem;
	height:4rem;
	line-height:4rem;
	box-sizing:border-box;
	border-radius:50%;
	background:#474747;
	font-weight:600;
	text-align:center;
	margin-right:1.5rem;
}
.location-wrap .sec01 .info > .txt > div .sns-wrap {
	display:flex;
	align-items:center;
}
.location-wrap .sec01 .info > .txt > div .sns-wrap > a {
	display:flex;
	align-items:center;
	margin-right:1.5rem;
	padding-right:1.5rem;
	box-sizing:border-box;
	font-size:2rem;
	color:#fff;
	position:relative;
}
.location-wrap .sec01 .info > .txt > div .sns-wrap > a:before {
	content:"";
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
	width:1px;
	height:50%;
	background:rgba(255,255,255,0.4);
}
.location-wrap .sec01 .info > .txt > div .sns-wrap > a:last-child:before {
	display:none;
}


@media (max-width: 991.98px) {
	.location-wrap .sec01 .map {
		height:30rem;
	}
	.location-wrap .sec01 .info {
		padding:2rem 2rem;
		display:block;
	}
	.location-wrap .sec01 .info > .img {
		display:none;
	}
	.location-wrap .sec01 .info > .txt {
		max-width:100%;
		flex:0 0 100%;
	}
	.location-wrap .sec01 .info > .txt > div {
		display:block;
		text-align:center;
	}
	.location-wrap .sec01 .info > .txt > div > strong {
		margin-right:0;
	}
	.location-wrap .sec01 .info > .txt > div > p {
		margin-top:1rem;
	}
	.location-wrap .sec01 .info > .txt > div.flex {
		justify-content:center;
	}
	.location-wrap .sec01 .info > .txt > div.flex > div {
		margin-right:0;
		margin-bottom:1rem;
		display:block;
	}
	.location-wrap .sec01 .info > .txt > div.flex > div > strong {
		margin-right:0;
	}
	.location-wrap .sec01 .info > .txt > div.flex > div > p {
		margin-top:1rem;
	}
	.location-wrap .sec01 .info > .txt > div .sns-wrap {
		margin-top:1rem;
		justify-content:center;
	}
	.location-wrap .sec01 .info > .txt > div .sns-wrap > a:last-child {
		margin-right:0;
		padding-right:0;
	}
}


/* esg-wrap */
.esg-wrap .sec01 {
	padding:0 0 15rem;
}
.esg-wrap .sec01 p {
	text-align:center;
	font-size:2.4rem;
}
@media (max-width: 991.98px) {
	.esg-wrap .sec01 p {
		font-size:1.8rem;
	}
}

.esg-wrap .sec02 {
	background:#000 url('../_img/sub/esg_sec02_bg.jpg') no-repeat center top / cover;
}
.esg-wrap .sec02 .title {
	color:#fff;
}
.esg-wrap .sec02 .diagram {
	box-sizing:border-box;
	margin-top:8rem;
	padding:8rem 3rem;
	background:url('../_img/sub/esg_sec02_dot.jpg.png') no-repeat center center / contain;
}
.esg-wrap .sec02 .diagram .row {
	align-items:center;
}
.esg-wrap .sec02 .diagram .row > div[class^='col-'] {
	max-width:20%;
	flex:0 0 20%;
}
.esg-wrap .sec02 .diagram .row > div[class^='col-'] .inner {
	text-align:center;
	position:relative;
	width:100%;
	padding-bottom:92%;
	background: linear-gradient(305deg, rgba(16,65,85,1) 0%, rgba(177,211,74,1) 100%);
	box-sizing:border-box;
	border:10px solid #fff;
	border-radius:50%;
}
.esg-wrap .sec02 .diagram .row > div[class^='col-'] .inner > .in {
	position:absolute;
	width:100%;
	top:50%;
	transform:translateY(-50%);
	box-sizing:border-box;
	padding:2rem;
	color:#fff;
	font-size:2rem;
	font-weight:200;
}
.esg-wrap .sec02 .diagram .row > div[class^='col-'] .inner > .in > .num {
	margin:0 auto;
	width:2.8rem;
	height:2.8rem;
	text-align:center;
	line-height:3rem;
	font-size:1.6rem;
	font-weight:600;
	color:#5e8750;
	background:#fff;
	border-radius:50%;
	margin-bottom:1rem;
}
@media (max-width: 1280px) {
	.esg-wrap .sec02 .diagram .row > div[class^='col-'] .inner > .in {
		padding:1.5rem;
		font-size:1.8rem;
	}
}
@media (max-width: 1199.98px) {
	.esg-wrap .sec02 .diagram {
		margin-top:4rem;
		padding:4rem 2rem 0;
	}
	.esg-wrap .sec02 .diagram .row {
		justify-content:center;
	}
	.esg-wrap .sec02 .diagram .row > div[class^='col-'] {
		max-width:33.3333%;
		flex:0 0 33.3333%;
		margin-bottom:3rem;
	}
}
@media (max-width: 991.98px) {
	.esg-wrap .sec02 .diagram {
		margin-top:4rem;
		padding:4rem 2rem 0;
		background:url('../_img/sub/esg_sec02_dot-mo.png') no-repeat center center / contain;
	}
	.esg-wrap .sec02 .diagram .row {
		justify-content:center;
		margin-left:-1rem;
		margin-right:-1rem;
	}
	.esg-wrap .sec02 .diagram .row > div[class^='col-'] {
		max-width:50%;
		flex:0 0 50%;
		padding-left:1rem;
		padding-right:1rem;
		margin-bottom:2rem;
	}
	.esg-wrap .sec02 .diagram .row > div[class^='col-'] .inner > .in {
		font-size:1.8rem;
	}
	.esg-wrap .sec02 .diagram .row > div[class^='col-'] .inner > .in > .num {
		font-size:1.4rem;
	}
}
@media (max-width: 575.98px) {
	.esg-wrap .sec02 .diagram {
		margin-top:3rem;
		padding:3rem 0 0;
	}
	.esg-wrap .sec02 .diagram .row > div[class^='col-'] .inner {
		padding-bottom:90%;
		border:8px solid #fff;
	}
}
@media (max-width: 340px) {
	.esg-wrap .sec02 .diagram .row > div[class^='col-'] {
		max-width:100%;
		flex:0 0 100%;
	}
}

.esg-wrap .sec03 .row {
	margin-top:4rem;
}
.esg-wrap .sec03 .row > div[class^='col-'] .box {
	display:flex;
	flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	align-items:center;
	box-sizing:border-box;
	padding:5rem 3rem;
	border:1px solid #ccc;
	height:26rem;
}
.esg-wrap .sec03 .row > div[class^='col-'] .box > .icon {
	margin-right:2rem;
	max-width:12.1rem;
	flex:0 0 12.1rem;
}
.esg-wrap .sec03 .row > div[class^='col-'] .box > .icon > img {
	width:100%;
}
.esg-wrap .sec03 .row > div[class^='col-'] .box > .txt {
	--wid:calc(100% - 14.1rem);
	max-width:var(--wid);
	flex:0 0 var(--wid);
}
.esg-wrap .sec03 .row > div[class^='col-'] .box > .txt > h4 {
	font-size:2.4rem;
	font-weight:400;
	color:#222;
}
.esg-wrap .sec03 .row > div[class^='col-'] .box > .txt > h4 > span {
	font-weight:200;
	color:#777;
}
.esg-wrap .sec03 .row > div[class^='col-'] .box > .txt > ul {
	list-style:none;
	padding-left:0;
}
.esg-wrap .sec03 .row > div[class^='col-'] .box > .txt > ul > li {
	font-size:1.8rem;
	font-weight:400;
	color:#333;
	position:relative;
	box-sizing:border-box;
	margin:1rem 0;
	padding-left:1.5rem;
}
.esg-wrap .sec03 .row > div[class^='col-'] .box > .txt > ul > li:before {
	content:"";
	position:absolute;
	width:4px;
	height:4px;
	left:0;
	top:1rem;
	border-radius:50%;
	background:var(--green-color);
}
@media (max-width: 1199.98px) {
	.esg-wrap .sec03 .row > div[class^='col-']{
		margin-bottom:8rem;
	}
	.esg-wrap .sec03 .row > div[class^='col-']:last-child {
		margin-bottom:0;
	}
	.esg-wrap .sec03 .row > div[class^='col-'] .box {
		height:auto;
	}
}
@media (max-width: 991.98px) {
	.esg-wrap .sec03 .row {
		margin-top:2rem;
	}
	.esg-wrap .sec03 .row > div[class^='col-']{
		margin-bottom:4rem;
	}
	.esg-wrap .sec03 .row > div[class^='col-'] .box {
		padding:4rem 2rem;
	}
	.esg-wrap .sec03 .row > div[class^='col-'] .box > .icon {
		max-width:10rem;
		flex:0 0 10rem;
	}
	.esg-wrap .sec03 .row > div[class^='col-'] .box > .txt {
		--wid:calc(100% - 12rem);
	}
	.esg-wrap .sec03 .row > div[class^='col-'] .box > .txt > h4 {
		font-size:2rem;
	}
	.esg-wrap .sec03 .row > div[class^='col-'] .box > .txt > ul > li {
		margin:0.8rem 0;
		padding-left:1.2rem;
	}
}
@media (max-width: 575.98px) {
	.esg-wrap .sec03 .row > div[class^='col-'] .box {
		display:block;
		padding:4rem 2rem 3rem;
	}
	.esg-wrap .sec03 .row > div[class^='col-'] .box > .icon {
		margin-right:0;
		text-align:center;
		max-width:100%;
		flex:0 0 100%;
	}
	.esg-wrap .sec03 .row > div[class^='col-'] .box > .icon > img {
		max-width:12.1rem;
	}
	.esg-wrap .sec03 .row > div[class^='col-'] .box > .txt {
		--wid:100%;
		margin-top:3rem;
	}
	.esg-wrap .sec03 .row > div[class^='col-'] .img > img {
		max-width:40rem !important;
	}
}

.esg-wrap .sec04 {
	background:#edf8ff;
}
.esg-wrap .sec04:last-child {
	padding:15rem 0;
}
.esg-wrap .sec04 .top {
	margin-top:4rem;
	display:flex;
	align-items:center;
	background:#fff;
	box-sizing:border-box;
	border:1px solid #ddd;
	padding:4rem 0;
}
.esg-wrap .sec04 .top > .logo {
	max-width:30%;
	flex:0 0 30%;
	text-align:center;
	box-sizing:border-box;
}
.esg-wrap .sec04 .top > .info {
	max-width:70%;
	flex:0 0 70%;
	box-sizing:border-box;
	padding:5rem;
	border-left:1px solid #ddd;
}
.esg-wrap .sec04 .top > .info > h4 {
	font-size:3rem;
	font-weight:400;
	color:#222;
}
.esg-wrap .sec04 .top > .info > p {
	font-size:2rem;
	font-weight:400;
	color:#222;
	margin-top:2rem;
	line-height:1.5;
}
@media (max-width: 1280px) {
	.esg-wrap .sec04 .top > .logo {
		padding:0 2rem;
	}
	.esg-wrap .sec04 .top > .info {
		padding:4rem 3rem;
	}
}
@media (max-width: 991.98px) {
	.esg-wrap .sec04:last-child {
		padding:6rem 0;
	}
	.esg-wrap .sec04 .top {
		display:block;
		margin-top:2rem;
		padding:2rem 0;
	}
	.esg-wrap .sec04 .top > .logo {
		max-width:100%;
		flex:0 0 100%;
		text-align:center;
	}
	.esg-wrap .sec04 .top > .logo > img {
		max-width:28rem !important;
	}
	.esg-wrap .sec04 .top > .info {
		max-width:100%;
		flex:0 0 100%;
		padding:0 2rem;
		border-left:0;
	}
	.esg-wrap .sec04 .top > .info > h4 {
		font-size:2rem;
	}
	.esg-wrap .sec04 .top > .info > p {
		font-size:1.8rem;
		margin-top:1rem;
	}
}

.esg-wrap .sec04 .s-tit {
	position:relative;
	box-sizing:border-box;
	padding-left:2rem;
	font-size:3rem;
	font-weight:400;
	color:#222;
}
.esg-wrap .sec04 .s-tit:before {
	content:"";
	position:absolute;
	width:0.6rem;
	height:1.6rem;
	left:0;
	top:50%;
	transform:translateY(-65%);
	background: linear-gradient(360deg, rgba(16,65,85,1) 45%, rgba(177,211,74,1) 55%);
}
.esg-wrap .sec04 .mid {
	margin-top:8rem;
}
.esg-wrap .sec04 .mid > .row {
	margin-top:4rem;
}
.esg-wrap .sec04 .mid > .row > div[class^='col-'] {
	margin-bottom:4rem;
}
.esg-wrap .sec04 .mid > .row > div[class^='col-'] > .box {
	height:100%;
	display:flex;
	align-items:flex-end;
	box-sizing:border-box;
	padding:14rem 3rem 5rem;
	border-radius:2rem;
	color:#fff;
}
.esg-wrap .sec04 .mid > .row > div[class^='col-'] > .box > .in > h4 {
	font-size:2.4rem;
	font-weight:400;
}
.esg-wrap .sec04 .mid > .row > div[class^='col-'] > .box > .in > ul {
	list-style:none;
	padding-left:0;
}
.esg-wrap .sec04 .mid > .row > div[class^='col-'] > .box > .in > ul > li {
	font-size:1.8rem;
	font-weight:400;
	color:#fff;
	position:relative;
	box-sizing:border-box;
	margin:1rem 0;
	padding-left:1.5rem;
}
.esg-wrap .sec04 .mid > .row > div[class^='col-'] > .box > .in > ul > li:before {
	content:"";
	position:absolute;
	width:4px;
	height:4px;
	left:0;
	top:1rem;
	border-radius:50%;
	background:#fff;
}
@media (max-width: 1480px) {
	.esg-wrap .sec04 .mid > .row {
		margin-left:-1rem;
		margin-right:-1rem;
	}
	.esg-wrap .sec04 .mid > .row > div[class^='col-'] {
		padding-left:1rem;
		padding-right:1rem;
		margin-bottom:2rem;
	}
}
@media (max-width: 991.98px) {
	.esg-wrap .sec04 .s-tit {
		padding-left:1.5rem;
		font-size:2rem;
	}
	.esg-wrap .sec04 .mid {
		margin-top:6rem;
	}
	.esg-wrap .sec04 .mid > .row {
		margin-top:2rem;
	}
	.esg-wrap .sec04 .mid > .row > div[class^='col-']:last-child {
		margin-bottom:0;
	}
	.esg-wrap .sec04 .mid > .row > div[class^='col-'] > .box {
		padding:10rem 2rem 3rem;
	}
	.esg-wrap .sec04 .mid > .row > div[class^='col-'] > .box > .in > h4 {
		font-size:2rem;
	}
	.esg-wrap .sec04 .mid > .row > div[class^='col-'] > .box > .in > ul > li {
		margin:0.8rem 0;
	}
}

.esg-wrap .sec04 .btm {
	margin-top:6rem;
}
.esg-wrap .sec04 .btm > .inner {
	margin:4rem auto 0;
	width:50%;
}
.esg-wrap .sec04 .btm > .inner .img {
	text-align:center;
}
.esg-wrap .sec04 .btm > .inner .table-wrap {
	margin-top:4rem;
}
@media (max-width: 1199.98px) {
	.esg-wrap .sec04 .btm > .inner {
		width:80%;
	}
}
@media (max-width: 991.98px) {
	.esg-wrap .sec04 .btm {
		margin-top:4rem;
	}
	.esg-wrap .sec04 .btm > .inner {
		margin:2rem 0 0;
		width:100%;
	}
	.esg-wrap .sec04 .btm > .inner .table-wrap {
		margin-top:2rem;
	}
}


/* media */
.media-wrap .sec01 {
	padding:0 0 15rem;
}
.media-wrap .sec01 p {
	text-align:center;
	font-size:2.4rem;
}
@media (max-width: 991.98px) {
	.media-wrap .sec01 p {
		font-size:1.8rem;
	}
}
.media-wrap .sec02 {
	background:#000;
}
.media-wrap .sec02 .title{
	color:#fff;
}
.media-wrap .sec02 .row {
	margin-top:4rem;
}
.media-wrap .sec02 .row > div[class^="col-"] > .box {
	position:relative;
	box-sizing:border-box;
	cursor:pointer;
	overflow:hidden;
}
.media-wrap .sec02 .row > div[class^="col-"] > .box > .over {
	position:absolute;
	width:100%;
	height:100%;
	box-sizing:border-box;
	padding:5rem 4rem;
	left:0;
	bottom:0;
	color:#fff;
	display:flex;
	justify-content:flex-end;
	flex-direction:column;
}
.media-wrap .sec02 .row > div[class^="col-"] > .box > .over > h3 {
	font-size:2.4rem;
	font-weight:400;
	color:#fff;
}
.media-wrap .sec02 .row > div[class^="col-"] > .box > .over > ul {
	list-style:none;
	padding-left:0;
	margin-top:1rem;
	height:0;
	visibility:hidden;
	opacity:0;
	transition:all 0.2s ease;
}
.media-wrap .sec02 .row > div[class^="col-"] > .box > .over > ul > li {
	position:relative;
	padding-left:1.5rem;
	font-size:1.8rem;
	font-weight:200;
	box-sizing:border-box;
	margin:0.5rem 0;
}
.media-wrap .sec02 .row > div[class^="col-"] > .box > .over > ul > li:before {
	content:"";
	position:absolute;
	left:0;
	top:0.5rem;
	width:3px;
	height:16px;
	background:var(--green-color);
}
.media-wrap .sec02 .row > div[class^="col-"] > .box:hover > .over {
	background: linear-gradient(360deg, rgba(16,65,85,1) 0%, rgba(0,0,0,0.5) 100%);
}
.media-wrap .sec02 .row > div[class^="col-"] > .box:hover > .over > ul{
	height:10rem;
	visibility:visible;
	opacity:1;
}
@media (max-width: 1199.98px) {
	.media-wrap .sec02 .row {
		margin-left:-1rem;
		margin-right:-1rem;
	}
	.media-wrap .sec02 .row > div[class^="col-"] {
		padding-left:1rem;
		padding-right:1rem;
	}
	.media-wrap .sec02 .row > div[class^="col-"] > .box > .over {
		padding:4rem 3rem;
	}
}
@media (max-width: 991.98px) {
	.media-wrap .sec02 .row {
		margin-top:2rem;
	}
	.media-wrap .sec02 .row > div[class^="col-"] {
		margin-bottom:2rem;
	}
	.media-wrap .sec02 .row > div[class^="col-"]:last-child {
		margin-bottom:0;
	}
	.media-wrap .sec02 .row > div[class^="col-"] > .box > .over > h3 {
		font-size:2rem;
	}
	.media-wrap .sec02 .row > div[class^="col-"] > .box > .over > ul > li {
		font-size:1.6rem;
	}
	.media-wrap .sec02 .row > div[class^="col-"] > .box > .over > ul > li:before {
		top:0.5rem;
		width:3px;
		height:12px;
	}
	.media-wrap .sec02 .row > div[class^="col-"] > .box:hover > .over > ul{
		height:8rem;
	}
}


.media-wrap .sec03 .row {
	margin-top:4rem;
}
.media-wrap .sec03 .row > div[class^="col-"] > .box {
	position:relative;
	box-sizing:border-box;
	cursor:pointer;
	overflow:hidden;
}
.media-wrap .sec03 .row > div[class^="col-"] > .box > .over {
	position:absolute;
	width:100%;
	height:100%;
	box-sizing:border-box;
	padding:5rem 4rem;
	left:0;
	bottom:0;
	color:#fff;
	display:flex;
	justify-content:flex-end;
	flex-direction:column;
}
.media-wrap .sec03 .row > div[class^="col-"] > .box > .over > h3 {
	font-size:2.4rem;
	font-weight:400;
	color:#fff;
}
.media-wrap .sec03 .row > div[class^="col-"] > .box > .over > ul {
	list-style:none;
	padding-left:0;
	margin-top:1rem;
	height:0;
	visibility:hidden;
	opacity:0;
	transition:all 0.2s ease;
}
.media-wrap .sec03 .row > div[class^="col-"] > .box > .over > ul > li {
	position:relative;
	padding-left:1.5rem;
	font-size:1.8rem;
	font-weight:200;
	box-sizing:border-box;
	margin:0.5rem 0;
}
.media-wrap .sec03 .row > div[class^="col-"] > .box > .over > ul > li:before {
	content:"";
	position:absolute;
	left:0;
	top:0.5rem;
	width:3px;
	height:16px;
	background:var(--green-color);
}
.media-wrap .sec03 .row > div[class^="col-"] > .box:hover > .over {
	background: linear-gradient(360deg, rgba(16,65,85,1) 0%, rgba(0,0,0,0.5) 100%);
}
.media-wrap .sec03 .row > div[class^="col-"] > .box:hover > .over > ul{
	height:6rem;
	visibility:visible;
	opacity:1;
}
@media (max-width: 1199.98px) {
	.media-wrap .sec03 .row {
		margin-left:-1rem;
		margin-right:-1rem;
	}
	.media-wrap .sec03 .row > div[class^="col-"] {
		padding-left:1rem;
		padding-right:1rem;
	}
	.media-wrap .sec03 .row > div[class^="col-"] > .box > .over {
		padding:4rem 3rem;
	}
}
@media (max-width: 991.98px) {
	.media-wrap .sec03 .row {
		margin-top:2rem;
	}
	.media-wrap .sec03 .row > div[class^="col-"] {
		margin-bottom:2rem;
	}
	.media-wrap .sec03 .row > div[class^="col-"]:last-child {
		margin-bottom:0;
	}
	.media-wrap .sec03 .row > div[class^="col-"] > .box > .over > h3 {
		font-size:2rem;
	}
	.media-wrap .sec03 .row > div[class^="col-"] > .box > .over > ul > li {
		font-size:1.6rem;
	}
	.media-wrap .sec03 .row > div[class^="col-"] > .box > .over > ul > li:before {
		top:0.5rem;
		width:3px;
		height:12px;
	}
	.media-wrap .sec03 .row > div[class^="col-"] > .box:hover > .over > ul{
		height:4rem;
	}
}
@media (max-width: 575.98px) {
	.media-wrap .sec03 .row > div[class^="col-"] > .box {
		box-sizing:border-box;
		padding-bottom:6rem;
		background:#000;
	}
}

.media-wrap .sec04:last-child {
	padding:15rem 0 11rem;
	background:#edf8ff;
}
.media-wrap .sec04 .row {
	margin-top:4rem;
}
.media-wrap .sec04 .row > div[class^='col-'] {
	margin-bottom:4rem;
}
@media (max-width: 1199.98px) {
	.media-wrap .sec04 .row {
		margin-left:-1rem;
		margin-right:-1rem;
	}
	.media-wrap .sec04 .row > div[class^='col-'] {
		padding-left:1rem;
		padding-right:1rem;
		margin-bottom:2rem;
	}
}
@media (max-width: 991.98px) {
	.media-wrap .sec04:last-child {
		padding:6rem 0 4rem;
	}
}



/* 유통 */
.circu-wrap .sec01:last-child {
	padding:0 0 15rem;
}
.circu-wrap .sec01 p {
	text-align:center;
	font-size:2.4rem;
}
@media (max-width: 991.98px) {
	.circu-wrap .sec01 p {
		font-size:1.8rem;
	}
}
.circu-wrap .sec01 .img {
	margin-top:6rem;
	height:50rem;
	display:flex;
	align-items:center;
	justify-content:center;
}
.circu-wrap .sec01 .img > .txt-box {
	font-size:3rem;
	font-weight:400;
	color:#fff;
	box-sizing:border-box;
	padding:0 2rem;
}
.circu-wrap .sec01 .row {
	box-sizing:border-box;
	margin:8rem 10% 0;
	background:url('../_img/sub/circu_sec01_line.png') no-repeat center top 10rem / 52%;
}
.circu-wrap .sec01 .row > div[class^='col-'] {
	text-align:center;
}
.circu-wrap .sec01 .row > div[class^='col-'] .inner {
	display:flex;
	flex-direction:column;
	align-items:center;
}
.circu-wrap .sec01 .row > div[class^='col-'] .icon > img {
	max-width:23.1rem;
}
.circu-wrap .sec01 .row > div[class^='col-'] .txt {
	text-align:left;
	margin-top:3rem;
}
.circu-wrap .sec01 .row > div[class^='col-'] .txt > h4 {
	font-size:2.2rem;
	font-weight:400;
	color:#222;
}
.circu-wrap .sec01 .row > div[class^='col-'] .txt > ul {
	list-style:none;
	padding-left:0;
	margin-top:1rem;
}
.circu-wrap .sec01 .row > div[class^='col-'] .txt > ul > li {
	position:relative;
	font-size:1.8rem;
	margin:0.3rem 0;
	box-sizing:border-box;
	padding-left:1.5rem;
}
.circu-wrap .sec01 .row > div[class^='col-'] .txt > ul > li:before {
	content:"·";
	position:absolute;
	left:0;
	top:0;
}
@media (max-width: 1199.98px) {
	.circu-wrap .sec01 .row {
		margin:8rem 4% 0;
	}
}
@media (max-width: 991.98px) {
	.circu-wrap .sec01:last-child {
		padding:0 0 6rem;
	}
	.circu-wrap .sec01 .img {
		margin-top:3rem;
		height:30rem;
	}
	.circu-wrap .sec01 .img > .txt-box {
		font-size:2rem;
	}
	.circu-wrap .sec01 .row {
		margin:6rem 0 0;
		background:url('../_img/sub/circu_sec01_line-mo.png') no-repeat left 12rem top / contain;
	}
	.circu-wrap .sec01 .row > div[class^='col-'] {
		text-align:left;
		margin-bottom:4rem;
	}
	.circu-wrap .sec01 .row > div[class^='col-']:last-child {
		margin-bottom:0;
	}
	.circu-wrap .sec01 .row > div[class^='col-'] .inner {
		flex-direction:row;
	}
	.circu-wrap .sec01 .row > div[class^='col-'] .icon > img {
		max-width:20rem;
	}
	.circu-wrap .sec01 .row > div[class^='col-'] .txt {
		margin-top:0;
		margin-left:4rem;
	}
	.circu-wrap .sec01 .row > div[class^='col-'] .txt > h4 {
		font-size:2rem;
	}
	.circu-wrap .sec01 .row > div[class^='col-'] .txt > ul > li {
		font-size:1.6rem;
		padding-left:1.2rem;
	}
}
@media (max-width: 575.98px) {
	.circu-wrap .sec01 .row {
		background-position:left 7rem top;
	}
	.circu-wrap .sec01 .row > div[class^='col-'] {
		margin-bottom:2rem;
	}
	.circu-wrap .sec01 .row > div[class^='col-'] .inner {
		align-items:flex-start;
	}
	.circu-wrap .sec01 .row > div[class^='col-'] .icon {
		max-width:10rem;
		flex:0 0 10rem;
	}
	.circu-wrap .sec01 .row > div[class^='col-'] .icon > img {
		max-width:100%;
	}
	.circu-wrap .sec01 .row > div[class^='col-'] .txt {
		margin-left:1.5rem;
		padding-top:1rem;
		--wid : calc(100% - 12.5rem);
		max-width: var(--wid);
		flex:0 0 var(--wid);
	}
	.circu-wrap .sec01 .row > div[class^='col-'] .txt > ul > li {
		margin:0.2rem 0;
	}
}