@charset "utf-8";

p {font-family: 'NEXON Lv2 Gothic Light';}
h1, h2,h3 {font-family: 'NEXON Lv2 Gothic Bold';}

.sub_top {text-align: right; max-width: 1280px; margin: 0 auto; width: 80%; margin-top: 50px;}
.sub_top p {color: #666; font-size: 15px;}
.sub_top img {margin-right: 10px; vertical-align: baseline; display: inline-block;   position: relative;  top: 2px;}

.visual {color: #191b1d; max-width: 1640px; width: 90%; margin: 0 auto; position: relative;}
.visual h1 {font-size: 66px; padding-left: 180px;}
.visual p {font-size: 30px; color: #666; padding-left: 180px; margin-top: 20px;}
.visual.hire p {font-size: 30px; position: absolute; bottom: 7%; left: 5%; color: #fff;}
.visual img {width: 100%; margin-top: 40px;}

.main {max-width: 1280px; width: 90%; margin: 0 auto; position: relative; color: #191b1d; padding-bottom: 150px;}
.main .titlebox {text-align: center;}
.main .titlebox h2 {font-size: 66px;}
.main .titlebox p {font-size: 26px; padding-top: 20px;font-family: 'NEXON Lv2 Gothic Regular'; padding-bottom: 50px;}
.main .titlebox .bar {width: 1px; height: 50px; background: #191b1d; display: block; margin: 0 auto;}
.main .contentbox {display: flex; align-items: flex-start;justify-content:space-between; padding-top: 50px;}
.main .contentbox.reverse {flex-direction: row-reverse;}
.main .contentbox .rightbox {padding-left: 100px;}
.main .contentbox.reverse .rightbox {padding-right: 100px; padding-left: 0;}
.main .contentbox .leftbox, .main .contentbox .rightbox {width: 50%;}
.main .contentbox .leftbox {padding-right: 100px;}
.main .contentbox.reverse .leftbox {padding-right: 0;}
.main .contentbox ul li {padding-bottom: 40px;}
.main .contentbox ul li h3 {font-size: 30px;font-family: 'NEXON Lv2 Gothic Bold'; padding-bottom: 20px;}
.main .contentbox ul li p {font-size: 19px; word-break: keep-all; font-family: 'NEXON Lv2 Gothic Regular'; color: #777;}
/*.item {opacity: 0;-webkit-transform: translateX(-40px);-moz-transform: translateX(-40px);-ms-transform: translateX(-40px);-o-transform: translateX(-40px);
transform: translateX(100px);-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;-ms-transition: all 0.6s ease-out;-o-transition: all 0.6s ease-out;transition: all 0.6s ease-out;}
*/

.container {position: relative;}
.main .contentbox .leftbox {  overflow: hidden;}
.welfare_list {position:relative}

#health_wrap.midFixed {position: fixed; top: 60px;}
#health_wrap.midFixed.fixEnd {position: absolute; top: auto; bottom: 60px;}

.support_wrap, .health_wrap, .growth_wrap, .life_wrap {margin-top: 160px;}



/* ESG */
.esg_policy .policy_list {padding-bottom: 60px}
.esg_policy .policy_list .list_title {display: inline-block;   font-size: 34px;  font-family: 'NEXON Lv2 Gothic Bold';position: relative;}
.esg_policy .policy_list .list_title:after {content: "";     position: absolute;    right: -1.4em;    top: 0;    width: 1em;    height: 1em;    border-radius: 100%; background: url(/img/sub/list_arrow_down.png) no-repeat center #eaeaea; }
.esg_policy .policy_list .list_title.on:after {  background: url(/img/sub/list_arrow.png) no-repeat center #eaeaea;}
.esg_policy .policy_list_emement {display: none; position: absolute;     left: 0;    top: 60px;    top: 60px;    width: 360px;    z-index: 19999;    padding: 20px;    border: 1px solid #222; background: #fff;}
.esg_policy .policy_list_emement li a {display: block;   font-size: 20px;    padding: 0.5em;margin-bottom: 3px;}
.esg_policy .policy_list_emement li a:hover {background:#f8f8f8}
.esg_policy .policy_list_emement li:last-child a {margin-bottom: 0;}
.esg_policy .policy_list_emement li.on a {font-family: 'NEXON Lv2 Gothic', sans-serif; background:#f8f8f8; font-weight: bold;}
.esg_policy .contents {padding-bottom:150px}
.esg_policy .contents {font-size:18px; line-height:1.6em; font-family: 'NEXON Lv2 Gothic', sans-serif;}
.esg_policy .contents p {font-size:18px; line-height:1.6em;  font-family: 'NEXON Lv2 Gothic', sans-serif; word-break: keep-all;}
.esg_policy .contents p b {font-size:1.3em;  font-family: 'NEXON Lv2 Gothic Bold';}
.esg_policy .contents table {border: none ! IMPORTANT; border-bottom: 1px solid #222 !important;  border-top: 1px solid #222 !important; margin-bottom: 30px; width: 100%; border-collapse: collapse;  border-spacing: 0;}
.esg_policy .contents table td {text-align: center;   padding: 1.2em; border-color:#eaeaea !important;border-width: 0px 0px 1px 1px; border-style: none none solid solid;}
.esg_policy .contents table tr td:first-child {border-left:none !important}
.esg_policy .contents table tr td:last-child {border-right:none !important}
.esg_policy .contents table tr:first-child td {border-color:#222 !important; border:none !important; border-bottom: 1px solid #222 !important; }
.esg_policy .contents table tr:first-child td, 
.esg_policy .contents table tr:first-child td p { font-family: 'NEXON Lv2 Gothic Bold' !important;}
.esg_policy .contents table tr:last-child td { border-bottom: 1px solid #222 !important;}
.esg_policy .contents table.element_2 td {width:50%}
.esg_policy .contents table.element_3 td {width:33.33%}
.esg_policy .contents table.element_4 td {width:25%}
.esg_policy .contents table.element_5 td {width:20%}
.esg_policy .contents table.element_6 td {width:16.66%}
.esg_policy .contents table td p b {font-size: inherit;  font-family: 'NEXON Lv2 Gothic', sans-serif;}
.esg_policy .contents table td.align_left {text-align:left}
.esg_policy .contents .img_wrap {text-align:center; }
.esg_policy .contents .p_link_btn_wrap {text-align: center !important;margin: 50px 0 !important;}
.esg_policy .contents .p_link_btn_wrap a {display: inline-block; width: 90%;  max-width: 400px;}
.esg_policy .contents h3 {font-size:26px}
.esg_policy .contents p a.link {text-decoration: underline;  text-underline-offset: 3px;}
.esg_policy .contents p a.link:hover {color: #004cd6;}


.esg_policy .contents table.env.element_2 td { width:auto !important}
.esg_policy .contents table.env .has_border_right {border-right: 1px solid #eaeaea !important}
.esg_policy .contents table.env .has_border_left {border-left: 1px solid #eaeaea !important}
.esg_policy .contents table.env .has_border_bottom.default  {border-bottom: 1px solid #eaeaea !important}
.esg_policy .contents table.env .has_border_bottom.black  {border-bottom: 1px solid #222 !important}

.esg_policy .contents table td ul {padding: 20px 0 20px;}
.esg_policy .contents table td ul li {margin-bottom:1em; position:relative; padding-left:0.8em; word-break: keep-all;}
.esg_policy .contents table td ul li:last-child {margin-bottom:0;}
.esg_policy .contents table td ul li:before {content:"-"; position:absolute; left:0; top:0;}


.esg_current_category{margin-bottom:60px;border-top:1px solid #eaeaea;border-bottom:1px solid #eaeaea;padding:30px}
.esg_current_category ul:after{content:"";display:block;clear:both}
.esg_current_category ul li{width:33.33%;float:left;text-align:center;border-right:1px solid #eaeaea}
.esg_current_category ul li:last-child {border-right: none}
.esg_current_category ul li a{font-size:21px;color:#bababb;font-family:'NEXON Lv2 Gothic Bold'}
.esg_current_category ul li a.tab_on{font-weight:900;color:#191b1d}
.esg_current .tab .table_title {font-size: 24px;  margin-bottom: 1em;}
.esg_current .tab .flex_box {display: flex; gap: 80px;  flex-wrap: wrap;}
.esg_current .tab .flex_box .contents {flex: 1;}
.esg_current .tab .esg_policy .contents table {margin-bottom: 40px;}
.esg_current .tab .esg_policy .contents .comment {font-size: 17px;    text-align: right;    padding: 1em 1.8em;    background: #f8f8f8;    line-height: 1em;}





@media (max-width:1400px) {
	.visual h1 {font-size: 50px;}
	.visual p {font-size: 28px;}
	.main .titlebox h2 {font-size: 50px;}
	.visual.hire p {font-size: 26px;}
	.sub_top p {font-size: 13px;}
	.main .titlebox p {font-size: 23px;padding-bottom:30px;}
	.main .contentbox ul li h3 {font-size: 25px;padding-bottom: 15px;}
	.main .contentbox ul li p {font-size: 17px;}
	.main .titlebox .bar {height: 40px;}
	
	
	/* ESG */
	.esg_policy .policy_list .list_title {font-size: 2vw;}
	.esg_policy .policy_list_emement {left: 20px;}
	.esg_policy .policy_list_emement li a {font-size: 1.6vw;}
}

@media (max-width:1300px) {
	.visual h1, .visual p {padding-left: 130px;}
}

@media (max-width:1200px) {
	.visual h1, .visual p {padding-left: 80px;}
	.visual h1, .main .titlebox h2 {font-size: 40px;}
	.visual p {font-size: 22px;}
	.visual.hire p {font-size: 22px;}
	.main .titlebox p {font-size: 21px;}
	.main .contentbox ul li h3 {font-size: 23px;}
	.main .contentbox ul li p {font-size: 16px;}
	.main .contentbox ul li {padding-bottom: 30px;}
	.support_wrap, .health_wrap, .growth_wrap, .life_wrap {margin-top: 100px;}
	
	
	/* ESG */
	.esg_policy .policy_list .list_title {font-size: 22px;}
	.esg_policy .policy_list_emement li a {font-size: 18px;}
	.esg_policy .policy_list_emement {width:90%; max-width: 280px; top: 50px;}
	
	.esg_current_category{padding:10px}
	.esg_current_category ul li{padding:0}
	.esg_current_category ul li a{font-size:20px;padding:20px;display:block}
	.esg_current .tab .flex_box .contents {  flex: unset;   width: 100%; padding-bottom: 0;}
	.esg_current .tab .flex_box {gap: 0;}
	.esg_current .tab .esg_policy .contents .comment {margin-bottom: 150px; font-size: 14px;}
}

@media (max-width:1050px) {
	.main .titlebox .bar {height: 35px;}
}

@media (max-width:800px) {
	.main .contentbox, .main .contentbox.reverse {flex-direction: column-reverse;}
	.main .contentbox .leftbox, .main .contentbox .rightbox {width: 100%;}
	.main .contentbox .leftbox, .main .contentbox.reverse .rightbox {padding-right: 0;}
	.main .contentbox .rightbox img, .main .contentbox.reverse .rightbox img {display: block; margin: 0 auto;}
	.main .contentbox .leftbox {padding: 0 80px; padding-top: 50px;}
	.main .contentbox .rightbox {padding-left: 0;}
	.visual {width: 100%; padding-top: 50px;}
	.sub_top p {font-size: 12px;}
	.visual h1, .main .titlebox h2 {font-size: 30px;}
	.visual h1, .visual p {padding-left: 0; text-align: center;}
	.main .titlebox p {font-size: 19px;}
	.main .titlebox p {padding: 20px 80px 20px 80px;}
	.main .contentbox {padding-top: 30px;}
	.main .contentbox ul li h3 {padding-bottom: 10px;}
	
	.esg_policy .contents table.level,
	.esg_policy .contents table.element_4 { display: block;     width: 100%;    overflow: auto;    white-space: nowrap;	}
	
}

@media (max-width:480px) {
	.main .titlebox h2 {font-size: 7.5vw;}
	.main .titlebox p {font-size: 4.5vw;}
	.main .contentbox ul li h3 {font-size: 5.5vw;}
	.main .contentbox ul li p {font-size: 4vw;line-height: 1.4em;}
	.support_wrap, .health_wrap, .growth_wrap, .life_wrap {margin-top: 80px;}
	.main .contentbox .leftbox {padding: 0; padding-top: 40px;}
	.main .titlebox p {padding: 20px 0;}
	.visual.hire p {font-size: 18px; width: 90%; word-break: keep-all;}
	.visual p {font-size: 18px; width: 90%; word-break: keep-all; margin: 10px auto 0;}
	.sub_top img {width: 3%;}
	.sub_top {width: 90%;}
	.sub_top p {text-align: left; padding-top: 30px;}

	/* ESG */
	.esg_policy .contents p,
	.esg_policy .contents {   font-size: 14px; }
		.esg_policy .contents h3 {  font-size: 20px; }
	
	.esg_current_category {padding: 10px 0px;}
	.esg_current_category ul li a{font-size:14px;padding:5px}
	.esg_current .tab .table_title {   font-size: 18px;}
	
	.esg_policy .contents table.env {display: block;   white-space: nowrap;    overflow: AUTO;}
}