@charset "utf-8";

#subVisual {display:flex; align-items:center; height:600px; background-image:url('../img/sub/sub01Bg.png'); background-size:cover; background-position:center bottom; background-repeat:no-repeat; position: relative;}
#subVisual h2 {position:relative; font-size:60px; color:#fff; font-weight:600; margin-bottom:60px;}
#subVisual.sub01 {background-image:url('../img/sub/sub01Bg.png');}
#subVisual.sub02 {background-image:url('../img/sub/sub02Bg.png');}
#subVisual.sub03 {background-image:url('../img/sub/sub03Bg.png');}
#subVisual.sub04 {background-image:url('../img/sub/sub04Bg.png');}
#subVisual.sub05 {background-image:url('../img/sub/sub05Bg.png');}
#subVisual.sub06 {background-image:url('../img/sub/sub06Bg.png');}
	@media screen and (max-width:1419px){
	}

	@media screen and (max-width:999px){
		#subVisual {height:350px;}
		#subVisual h2 {padding-top:125px; font-size:240%;}
	}

	@media screen and (max-width:799px){
		#subVisual {height:250px;}
		#subVisual h2 {padding-top:120px; font-size:180%;}
	}

	@media screen and (max-width:499px){
	}


#subVisual .locationBox {}
#subVisual .locationUl {display:block; text-align:center; color:#fff; margin-top:20px;}
#subVisual .locationUl li {display:inline-block; position:relative;margin-right:22px;vertical-align:top; line-height:1.5;font-size:15px; vertical-align:top;}
#subVisual .locationUl li:last-child {margin:0;}
/*#subVisual .locationUl li:after {display:block;position:absolute;top:3px;right:-12px;content:'';width:1px;height:15px; background:#fff; transform:rotate(15deg);-webkit-transform:rotate(15deg);}*/
#subVisual .locationUl li:after {display:block;position:absolute;top:6px;right:-12px;content:'';width:8px;height:8px;border:solid #fff;border-width:1px 1px 0 0;transform:rotate(45deg);-webkit-transform:rotate(45deg);}
#subVisual .locationUl li:last-child:after {display:none;}
#subVisual .locationUl li a {display:block; color:inherit;}

	@media screen and (max-width:1419px){
	}

	@media screen and (max-width:999px){
		#subVisual .locationUl li {font-size:95%;}
	}

	@media screen and (max-width:799px){
		#subVisual .locationUl {margin-top:10px;}
		#subVisual .locationUl li {font-size:80%;}
	}

	@media screen and (max-width:499px){
	}



/*서브메뉴*/
.locationNav {}
.locationNav .container{position:relative; padding-left:0;padding-right:0;}
.locationNav .home{float:left; width:40px; height:40px; text-align:center; margin-right:30px;}
.locationNav .home a {display:block; overflow:hidden; width:100%; height:100%; font-size:0; background:url('../img/sub/home.png') center no-repeat;}
.locationNav .sub_location{}
.locationNav .sub_location ul{margin:0;padding:0;list-style:none;}
.locationNav .sub_location ul:after{content:'';display:block;clear:both;}
.locationNav .sub_location p{margin:0;}
.locationNav .sub_location .snb_wrap > li{float:left;position:relative;z-index:100;min-width:200px;margin:0;padding:0;list-style-type:none; border-bottom:1px solid rgba(255,255,255,0.5); box-sizing:border-box; margin-right:40px;}
.locationNav .sub_location .snb_wrap > li > p {position:relative;line-height:40px;margin:0;padding-right:40px;color:#fff;font-size:18px;font-weight:300;text-align:left;cursor:pointer; text-transform:uppercase;}
.locationNav .sub_location .snb_wrap > li > p span.arrow::before, 
.locationNav .sub_location .snb_wrap > li > p span.arrow::after{position:absolute;top:46%; width:10px;height:1.5px; background:#fff; content:'';}
.locationNav .sub_location .snb_wrap > li > p span.arrow::before{right:6px; transform:rotate(45deg);-webkit-transform:rotate(45deg);}
.locationNav .sub_location .snb_wrap > li > p span.arrow::after{right:0; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
.locationNav .sub_location .snb_wrap > li.on > p span.arrow::before{transform:rotate(135deg);-webkit-transform:rotate(135deg);}
.locationNav .sub_location .snb_wrap > li.on > p span.arrow::after{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);}

.locationNav .sub_location .snb_wrap > li ul{display:none;position:absolute;width: 100%;background: #ffffff; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); padding: 25px 30px;}
.locationNav .sub_location .snb_wrap > li ul li {font-size:1em;}
.locationNav .sub_location .snb_wrap > li ul a{display: block; color: #666; padding:10px 0; -webkit-transition: all 0.4s; transition: all 0.4s;}
.locationNav .sub_location .snb_wrap > li ul a:hover{color:#0076CF; font-weight:500;}
.locationNav .sub_location .snb_wrap > li ul .on a{color:#0076CF;}

	@media screen and (max-width:999px) {
		.locationNav{display:none;}
	}


#subTabBox {background:#e60012; /*rgba(237,31,35,0.6);*/ height:60px; margin-top:-60px;}
#subTabBox .subTab {display:block; overflow:hidden; text-align:center; padding:0;}
#subTabBox .subTab li {display:inline-block; vertical-align:top;}
#subTabBox .subTab li:first-child {margin-left:0;}
#subTabBox .subTab li:first-child:nth-last-child(1), #subTabBox .subTab li:first-child:nth-last-child(1)~li{float:none; width:25%;}
#subTabBox .subTab li:first-child:nth-last-child(2), #subTabBox .subTab li:first-child:nth-last-child(2)~li{width:25%;}
#subTabBox .subTab li:first-child:nth-last-child(3), #subTabBox .subTab li:first-child:nth-last-child(3)~li{width:33.333%;}
#subTabBox .subTab li:first-child:nth-last-child(4), #subTabBox .subTab li:first-child:nth-last-child(4)~li{width:25%;}
#subTabBox .subTab li:first-child:nth-last-child(5), #subTabBox .subTab li:first-child:nth-last-child(5)~li{width:20%;}
#subTabBox .subTab li:first-child:nth-last-child(6), #subTabBox .subTab li:first-child:nth-last-child(6)~li{width:16.666%;}
#subTabBox .subTab li a {display:block; overflow:hidden; color:#fff; font-size:16px; letter-spacing:-0.02em; padding:18px 0;}
#subTabBox .subTab li.on a {background:#fff; color:#ed1f23;}

	@media screen and (max-width:999px){
		#subTabBox {padding:0;}
		#subTabBox .subTab {margin:0 -1px;}
		#subTabBox .subTab li a {font-size:95%; padding:19px 0;}
	}

	@media screen and (max-width:799px){
		#subTabBox { margin-top:0; height:auto; max-height:97px;}
		#subTabBox .subTab li {border-left:1px solid rgba(256,256,256,0.3);}
		#subTabBox .subTab li a {font-size:85%; padding:12px 0;}
		#subTabBox .subTab li:first-child:nth-last-child(1), #subTabBox .subTab li:first-child:nth-last-child(1)~li{width:50%; border-left:0;}
		#subTabBox .subTab li:first-child:nth-last-child(2), #subTabBox .subTab li:first-child:nth-last-child(2)~li{width:50%;}
		#subTabBox .subTab li:first-child:nth-last-child(3), #subTabBox .subTab li:first-child:nth-last-child(3)~li{width:33.333%;}
		#subTabBox .subTab li:first-child:nth-last-child(4), #subTabBox .subTab li:first-child:nth-last-child(4)~li{width:25%;}
		#subTabBox .subTab li:first-child:nth-last-child(5), #subTabBox .subTab li:first-child:nth-last-child(5)~li{width:20%;}
		#subTabBox .subTab li:first-child:nth-last-child(6), #subTabBox .subTab li:first-child:nth-last-child(6)~li{width:33.333%;}
	}

#sub {
	position: relative;
	background-color: #1f1f1f; 
	background-image: url(../img/sub/contBg.png); 
	background-size:100% auto;
}
#sub::before{
	position: absolute;
	left: 0;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(../img/sub/contBg_gr.png); background-repeat: repeat-x;
	z-index: 0;
	top:600px;
	height: 100vh;
	max-height: 600px;
	display: none;
}
#subContent {color: #fff; padding-bottom: 180px; margin-top:100px;}
#subContent h3#contentTitle {display:none;position:relative; font-size:40px; font-weight:500; letter-spacing:-0.02em; text-align:center; margin-bottom:40px;}
#subContent h3#contentTitle:after {position:absolute; width:8px; height:8px; background:#ed1f23; content:'';}
#subContent .contentWrap {}

	@media screen and (max-width:1419px){
	}

	@media screen and (max-width:999px){
		#subContent h3#contentTitle {font-size:200%}
	}

	@media screen and (max-width:799px){
		#subContent h3#contentTitle {font-size:160%}
	}

	@media screen and (max-width:499px){
	}



.subTabUl {display:block; overflow:hidden; margin-bottom:30px;}
.subTabUl li {float:left; width:33.333%; font-size:18px; color:#959595; font-family:'Montserrat', sans-serif; font-weight:600; text-align:center; background:#f9f9f9; border:1px solid #e6e6e6;}
.subTabUl li a {display:block; padding:20px 0;}
.subTabUl li.on {color:#2f2f2f; border:1px solid #969696; border-top:3px solid #e60012; background:#fff; border-bottom:0;}
.subTabUl li.on a {padding:20px 0 19px;}



.sub_wrap{
	width: 100%;
}
.sub_tit_box{
	color:#fff;
	font-size: 2em;
	text-align: center;
	word-break: keep-all;
}
.sub_tit_box b{
	color: #0076CF;
}


/* sub_ceo */
.sub_ceo{
	display: flex;
	flex-direction: column;
    align-items: center;
}
.sub_ceo > img{
	display: block;
	width: 150px;
	height: 105px;
	margin-bottom: 60px;
}
.sub_ceo > ul{
	margin-top: 60px;
	margin-bottom: 80px;
	display: flex;
}
.sub_ceo > ul li{
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	width: 240px;
	height: 240px;
	border-radius: 100%;
	font-size: 20px;
	color:#fff;
	margin-right: -30px;
	background-color: rgba(0,118,207,0.85);
	transform: rotate(-360deg);

	animation: cycling 1s 1 linear;
    animation-delay: 0s;
}
.sub_ceo > ul li:nth-of-type(2){
	background-color: rgba(0,107,195,0.85);
	transform: rotate(360deg);
	animation: cycling2 1s 1 linear;
}
.sub_ceo > ul li:nth-of-type(3){
	background-color: rgba(0,97,183,0.85);
}
.sub_ceo > ul li:nth-of-type(4){
	background-color: rgba(0,86,170,0.85);
	transform: rotate(360deg);
	animation: cycling2 1s 1 linear;
}
.sub_ceo > ul li:nth-of-type(5){
	background-color: rgba(0,75,158,0.85);
	margin-right: unset;
}

@keyframes cycling{
    0%{
		opacity: 0;
		bottom: -1000%;
		transform: rotate(-360deg);
	}
	50%{
		opacity: 0.5;
		transform: rotate(-180deg);
	}
    100%{
		opacity: 1;
		bottom: 0;
		transform: rotate(0deg);
	}
}
@keyframes cycling2{
    0%{
		opacity: 0;
		bottom: -1000%;
		transform: rotate(360deg);
	}
	50%{
		opacity: 0.5;
		transform: rotate(180deg);
	}
    100%{
		opacity: 1;
		bottom: 0;
		transform: rotate(0deg);
	}
}

.sub_ceo > ul li img{
	display: block;
	width: auto;
	height: 60px !important;
	margin-bottom: 15px;
}

.sub_ceo_box1{
	display: flex;
	align-items: center;
}
.sub_ceo_box1 img{
	display: block;
	width: 710px;
	height: 420px;
	margin-right: 60px;
}
.sub_ceo_box1 > div{
	display: flex;
	flex-direction: column;
}
.sub_ceo_box1 > div p{
	font-size: 1.2em;
	font-weight: 200;
	color: #fff;
	margin-bottom: 30px;
	word-break: keep-all;
}


/* sub_com */
.sub_com_box1{
	display: flex;
	flex-direction: column;
    align-items: center;
}
.sub_com_box1 p{
	margin:20px 0;
}
.sub_com_box1 > img:nth-of-type(2){
	transform: rotate(180deg);
}

.sub_com > img{
	display: block;
	margin:60px 0 80px;
	margin-left: -350px;
	width: 1770px;
	max-width: unset !important;
}

.sub_com_box2 div{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 60px;
}
.sub_com_box2 div:last-child{
	margin-bottom: 0;
	justify-content: flex-start;
}
.sub_com_box2 div p{
	line-height: 42px;
	font-size: 24px;
	color:#fff;
	font-weight: 200;
	word-break: keep-all;
}
.sub_com_box2 div img{
	display: block;
	margin:20px;
}
.sub_com_box2 div:last-child img{
	margin-right: 100px;
}



/* sub_his */
.his_depth{
	display: flex;
}
.his_depth li{
	font-size: 20px;
	color: #fff;
	margin-right: 60px;
}
.his_depth li:hover,
.his_depth li.on{
	color: #0076CF;
	font-weight: 400;
	border-bottom: 1px solid #0076CF;
	transition-duration: 1s;
}
.his_depth li a{
	display: block;
}
.sub_his_box1{
	width: 100%;
	height: 250px;
	border-radius: 0 35px 0 35px;
	background-image: url(../img/sub/img07.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	margin:30px 0 60px;
}
.sub_his_box1 > img{
	display: block;
	position: absolute;
	top:50%;
	transform: translate(0, -50%);
	left: 80px;
	width: 270px;
	height: 105px;
}
/*
.sub_his_box2::before{
	display: block;
	content: '';
	position: absolute;
	left:50%;
	transform: translate(-50%, 0);
	top:40px;
	width: 1px;
	height: calc(100% + 60px);
	background-color: rgba(255,255,255,0.2);
}
*/
.sub_his_box2{
	position: relative;
	margin-bottom: 60px;
}
.sub_his_box2 > div{
	display: flex;
	width: 100%;
}

.sub_his_box2 > span.line_blue{
	height: 0;
	background-color: #0076CF;
	z-index: 2;
}


.sub_his_box2 > div > div{
	width: 50%;
}
.his_left span{
	font-size: 20px;
	font-weight: 600;
	color: #0076CF;
}
.his_left p{
	font-size: 2em;
	word-break: keep-all;
	font-weight: 600;
	color:#fff;
	margin:10px 0 50px;
}

.his_right{
	position: relative;
	padding-top: 20px;
}
.his_right .yr{
	display: flex;
	padding-left: 50px;
	padding-bottom: 120px;
}
.his_right .yr h4::before{
	display: block;
	content: '';
	position: absolute;
	left:-54px;
	top:20px;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	background-color: #999;
	z-index: 3;
}
.his_right .yr.on h4::before{
	background-color: #0076CF;
}

.his_right .yr.on.active h4::before{
	width: 18px;
	height: 18px;
	background-color: #fff;
	border:4px solid #0076CF;
	box-shadow: 0px 0 3px 4px rgba(255,255,255,0.2);
	left: -57px;
	top:15px;
}
.sub_his_box2 > div:nth-of-type(1) .his_right .yr h4::before{
	background-color: #0076CF;
	width: 18px;
	height: 18px;
	background-color: #fff;
	border:4px solid #0076CF;
	box-shadow: 0px 0 3px 4px rgba(255,255,255,0.2);
	left: -57px;
	top:15px;
}
.his_right .yr h4{
	font-size: 38px;
	font-weight: 600;
	color:#fff;
	margin-right: 50px;
	position: relative;
}
.his_right .yr:not(.on) h4,
.his_right .yr:not(.on) ul{
	opacity: 0.2;
	transition-duration: 0.75s;
}
.his_right .yr ul{
	padding-top: 10px;
}
.his_right .yr ul li{
	margin-bottom: 20px;
}
.his_right .yr ul li:last-child{
	margin-bottom: 0;
}
.his_right .yr ul li p{
	color:#fff;
	font-weight: 200;
	font-size: 1em;
    word-break: keep-all;
}




.yr{
	position: relative;
}
span.line_gray,
span.line_blue{
	display: block;
	content: '';
	width: 1px;
	height: calc(100% - 0px);
	position: absolute;
	top:20px;
	left:0;
	background-color: rgba(255,255,255,0.2);
	z-index: 1;
}
span.line_blue{
	height: 0;
	z-index: 2;
}
.yr.on span.line_blue{
	background-color: #0076CF;
	height: calc(100% - 0);

	animation: liner 1s 1 forwards;
    animation-delay: 0s;
}
@keyframes liner{
    0%{
		opacity: 0;
		height: 0;
	}
    100%{
		opacity: 1;
		height: 100%;
	}
}
.yr.active span.line_blue{
	height: 0;
}


.sub_his_box2 > div:nth-of-type(1) .his_left{
	padding-bottom: 450px;
}
.sub_his_box2 > div:nth-of-type(2) .his_right{
	padding-bottom: 180px;
}

.sub_his_box2 > div:nth-of-type(1) .yr:last-child span,
.sub_his_box2 > div:nth-of-type(1) .yr:last-child.on span.line_blue{
	height: calc(100% + 188px) !important;
}
.sub_his_box2 > div:nth-of-type(2) .his_right > div:last-child span,
.sub_his_box2 > div:nth-of-type(2) .his_right > div:last-child span.line_blue{
	height: calc(100% + 370px) !important;
}
.sub_his_box2 > div:nth-of-type(3) .his_right > div:last-child span,
.sub_his_box2 > div:nth-of-type(2) .his_right > div:last-child span.line_blue{
	height: calc(100% + 200px) !important;
}



/* sub_glo */
.sub_glo_box1{
	position: relative;
	width: fit-content;
	margin:0 auto;
	margin-bottom: 120px;
}
.sub_glo_box1 img{
	display: block;
	width: auto;
	height: auto;
}
.sub_glo_box1 p{
	position: absolute;
}

.sub_glo_box1 p{
	position: absolute;
	display: block;
	content: '';
	width: fit-content;
	height: fit-content;
	border-radius: 20px;
	background-color: #000;
	background-image: url(../img/sub/icon11.png);
	background-position: left 15px center;
	background-repeat: no-repeat;
	background-size: auto;
	z-index: 1;
	opacity: 0;

	animation: appearGlobal 1s 1 forwards;
    animation-delay: 1.5s;
}

@keyframes appearGlobal{
    0%{
		bottom: 100%;
	}
    100%{
		opacity: 1;
	}
}
.sub_glo_box1 p:nth-of-type(5),
.sub_glo_box1 p:nth-of-type(6){
	animation: appearGlobal2 1s 1 forwards;
}

@keyframes appearGlobal2{
    0%{
		top: -100%;
	}
    100%{
		opacity: 1;
	}
}

.sub_glo_box1 p:nth-of-type(1){left:58px; bottom:113px; animation-delay: 2.25s;}
.sub_glo_box1 p:nth-of-type(2){left:193px; bottom:137px; animation-delay: 1.5s;}
.sub_glo_box1 p:nth-of-type(3){left:48px; bottom:240px; animation-delay: 2.75s;}
.sub_glo_box1 p:nth-of-type(4){left:105px; bottom:289px; animation-delay: 2s;}
.sub_glo_box1 p:nth-of-type(5){right:197px; top:218px; animation-delay: 1.75s;}
.sub_glo_box1 p:nth-of-type(6){right:243px; top:296px; animation-delay: 2.5s;}

.sub_glo_box1 p a::before{
	display: block;
	content: '';
	width: 12px;
	height: 10px;
	position: absolute;
	left: 30px;
	bottom: -10px;
	background-image: url(../img/sub/icon12.png);
}
.sub_glo_box1 p.map_c a::before{
	left:50%;
	transform: translate(-50%, 0);
}
.sub_glo_box1 p.map_r a::before{
	left:unset;
	right: 30px;
}
.sub_glo_box1 p a{
	display: block;
	color: #fff;
	position: relative;
	padding:9px 20px 9px 33px;
}

.sub_glo_box1 p.on,
.sub_glo_box1 p:hover{
	background-color: #0076CF;
	background-image: url(../img/sub/icon10.png);
	transition-duration: 0.5s;
}
.sub_glo_box1 p.on a::before,
.sub_glo_box1 p:hover a::before{
	background-image: url(../img/sub/icon13.png);
	transition-duration: 0.75s;
}

.sub_glo_box1 p a span{
	position: absolute;
	left: -20px;
	width: max-content;
	height: auto;
	transform: translate(-100%, -50%);
	display: none;
}
.sub_glo_box1 p:nth-of-type(2) a span,
.sub_glo_box1 p:nth-of-type(3) a span,
.sub_glo_box1 p:nth-of-type(4) a span{
	left: unset;
	right: -20px;
	transform: translate(100%, -50%);
}
.sub_glo_box1 p.on a span,
.sub_glo_box1 p:hover a span{
	/* display: block; */
	transition-duration: 0.25s;

	animation: appear 0.5s 1 forwards;
    animation-delay: 0s;

	display: none;
}
@keyframes appear{
    0%{
		opacity: 0;
		bottom: -100%;
	}
    100%{
		opacity: 1;
		bottom: 0;
	}
}

.glo_view{
	width: 100%;
	padding:80px 120px;
	background-color: rgba(255,255,255,0.05);
	border-radius: 0 30px 0 30px;
	display: flex;
	margin-bottom: 30px;
}
.glo_view.on{
	border:5px solid #0076CF;
}
.glo_view:last-child{
	margin-bottom: 0;
}
.glo_view > div:nth-of-type(1){
	width: 300px;
	padding-right: 20px;
}
.glo_view > div:nth-of-type(2){
	width: calc(100% - 300px);
}

.glo_view > div:nth-of-type(1) h4{
	font-size: 1.8em;
	font-weight: 600;
}
.glo_view > div:nth-of-type(1) span{
	display: block;
	margin-top: 10px;
	color: rgba(255,255,255,0.5);
	font-size: 18px;
}
.glo_view > div:nth-of-type(1) ul{
	margin-top: 25px;
}
.glo_view > div:nth-of-type(1) ul li{
	color:#0076CF;
	font-size: 1em;
	word-break: keep-all;
}

.glo_view > div:nth-of-type(2) li{
	font-size: 1.0em;
	color: rgba(255,255,255,0.8);
}
.glo_view > div:nth-of-type(2) li b{
	color:#fff;
	width: 150px;
	margin-right: 10px;
}
.glo_view > div:nth-of-type(2) > ul > li{
	margin-bottom: 30px;
	display: flex;
	word-break: keep-all;
}
.glo_view > div:nth-of-type(2) > ul > li ul{
	display: flex;
}
.glo_view > div:nth-of-type(2) > ul > li ul li{
	background-image: url(../img/sub/icon07.png);
	background-position:left center;
	background-repeat: no-repeat;
	background-size: auto;
	padding-left: 30px;
	margin-right: 30px;
	font-size: 1em;
}
.glo_view > div:nth-of-type(2) > ul > li ul li:nth-of-type(2){
	background-image: url(../img/sub/icon08.png);
}
.glo_view > div:nth-of-type(2) > ul > li ul li:nth-of-type(3){
	background-image: url(../img/sub/icon09.png);
}
.glo_view > div:nth-of-type(2) > ul > li ul li:last-child{
	margin-right: 0;
}


/* sub_rnd */
.sub_rnd{
	position: relative;
	margin-bottom: -180px;
}
.rnd_dummy{
	display: block;
	content: '';
	width: 1820px;
	height: 350px;
	position: relative;
	z-index: 0;
	left: 50%;
	transform: translate(-50%, 0);
}
.rnd_dummy::before,
.rnd_dummy::after{
	position: absolute;
	display: block;
	content: '';
	background-image: url(../img/sub/img_txt2.png);
	background-repeat: no-repeat;
	background-size: auto;

	/* animation: sideL 1s 1 forwards; */
    animation-delay: 0.5s;
}
.rnd_dummy::before{
	top:0;
	left:0;
	width: 1436px;
	height: 185px;
}
.rnd_dummy::after{
	bottom:0;
	right: 0;
	width: 1042px;
	height: 183px;
	background-image: url(../img/sub/img_txt3.png);

	/* animation: sideR 1s 1 forwards; */
    animation-delay: 1.0s;
}

@keyframes sideL{
    0%{
		opacity: 0;
		left:-1000%;
	}
    100%{
		opacity: 1;
		left: 0;
	}
}
@keyframes sideR{
    0%{
		opacity: 0;
		right:-1000%;
	}
    100%{
		opacity: 1;
		right: 0;
	}
}

.sub_rnd > img{
	display: block;
	position: absolute;
	left:50%;
	opacity: 0;
	transform: translate(-50%, 0);

	animation: sideT 1s 1 forwards;
    animation-delay: 1.5s;
}
@keyframes sideT{
    0%{
		opacity: 0;
		top:100%;
	}
    100%{
		opacity: 1;
		top:100px;
	}
}

.sub_rnd_box1::before{
	display: block;
	content: '';
	width: 1px;
	background-color: rgba(255,255,255,0.5);
	position: absolute;
	left:50%;
	transform: translate(-50%, 0);
	top:-75px;

	animation: sideB 1s 1 forwards;
    animation-delay: 2.5s;
}
@keyframes sideB{
    0%{
		opacity: 0;
		height: 0;
	}
    100%{
		opacity: 1;
		height: 60px;
	}
}


.sub_rnd_box1{
	padding-top: 30px;
	position: relative;
}
.sub_rnd_box1 ul li{
	display: flex;
	justify-content: center;
    align-items: center;
	flex-direction: column;
	margin-bottom: 30px;
}
.sub_rnd_box1 ul li:last-child{
	margin-bottom: 0;
}
.sub_rnd_box1 ul li p{
	font-size: 2em;
	font-weight: 800;
	text-align: center;
	word-break: keep-all;
}
.sub_rnd_box1 ul li p span{
	color: #0076CF;
	display: block;
}
.sub_rnd_box1 ul li img{
	display: block;
	width: 0;
	height: 120px;
	margin: 20px 0;

	/* animation: folding 1.5s 1 forwards; */
	animation-delay: 1.5s;

	opacity: 1;
	width: 380px;
	height: 120px;
}
@keyframes folding{
    0%{
		opacity: 0;
		width: 1px;
		height: 120px;
	}
    100%{
		opacity: 1;
		width: 380px;
		height: 120px;
	}
}
.sub_rnd_box1 ul li:nth-of-type(1) img{margin-right: 0;}
.sub_rnd_box1 ul li:nth-of-type(2) img{animation-delay: 2.5s;}
.sub_rnd_box1 ul li:nth-of-type(3) img{margin-left: 0; animation-delay: 3.5s;}

.sub_rnd_box2{
	margin-top: 120px;
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translate(-50%, 0);
}
.sub_rnd_box2 ul{
	display: flex;
	align-items: center;
}
.sub_rnd_box2 > ul > li{
	width: calc(100% / 3);
	height: 850px;
	position: relative;
	cursor: pointer;

	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;

	background-image: url(../img/sub/img14.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.sub_rnd_box2 > ul > li:nth-of-type(2){background-image: url(../img/sub/img15.jpg);}
.sub_rnd_box2 > ul > li:nth-of-type(3){background-image: url(../img/sub/img16.png);}


.sub_rnd_box2 > ul > li h4{
	font-size: 1.8em;
	font-weight: 600;
	z-index: 2;
}
.sub_rnd_box2 > ul > li:nth-of-type(2) ul{
	padding:0 125px;
}
.sub_rnd_box2 > ul > li ul li{
	display: inline-block;
	width: 160px;
	border-radius: 100%;
	background-color: rgba(255,255,255,0.1);
	font-size: 0.9em;
	text-align: center;
	display: flex;
	align-items: center;
    justify-content: center;
	margin-right: 20px;
	margin-bottom: 20px;
}


.sub_rnd_box2 > ul > li::before{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	left:0;
	top:0;
	z-index: -1;
	
	opacity: 0;
	display: block;
}
.sub_rnd_box2 > ul > li ul{
	margin-top: 80px;
	flex-wrap: wrap;
    justify-content: center;
	z-index: 2;
	padding:0 100px;
	position: absolute;
	left:50%;
	top:0;
	transform: translate(-50%, 0);
	z-index: -1;
	height: 1px;

	opacity: 0;
	display: flex;
}

.sub_rnd_box2 > ul > li:hover::before{
	transition-duration: 0.75s;
	opacity: 1;
	z-index: 1;
}
.sub_rnd_box2 > ul > li:hover ul{
	transition-duration: 0.75s;
	position: relative;
	opacity: 1;
	z-index: 2;
	height: fit-content;
}



/* sub_steel1 */
.sub_steel1{
	margin-bottom: -180px;
}


.sub_steel1_box1{
	display: flex;
	align-items: center;
    justify-content: space-between;
}
.sub_steel1_box1 > p{
	font-size: 38px;
	line-height: 50px;
	font-weight: 400;
}
.sub_steel1_box1 > p span{
	color: #0076CF;
	font-weight: 700;
}
.sub_steel1_box1 > ul{
	display: flex;
	align-items: center;
}
.sub_steel1_box1 > ul li:nth-of-type(1)::before{
	display: block;
	content: '';
	width: 1px;
	height: 200px;
	right:0;
	top:50%;
	transform: translate(0, -50%);
	background-color: rgba(255,255,255,0.2);
	position: absolute;
}
.sub_steel1_box1 > ul li:nth-of-type(1){
	padding-right: 70px;
	margin-right: 70px;
	position: relative;
}
.sub_steel1_box1 > ul li{
	display: flex;
	flex-direction: column;
    align-items: center;
}
.sub_steel1_box1 > ul li p{
	margin: 20px 0;
	color: rgba(255,255,255,0.5);
	font-size: 20px;
}
.sub_steel1_box1 > ul li p b{
	font-size: 48px;
	color: #fff;
	display: inline-block;
	margin-right: 5px;
}
.sub_steel1_box1 > ul li span{
	font-size: 24px;
}

.sub_steel1_box2{
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translate(-50%, 0);
	padding-top: 150px;
	padding-bottom: 180px;
	
	display: flex;
    flex-direction: column;
    align-items: center;

	overflow: hidden;
}
.sub_steel1_box2 ul{
	display: flex;
	flex-direction: row;
    flex-wrap: wrap;
	justify-content: center;
	justify-content: space-between;
}
.sub_steel1_box2 ul li{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 350px;
	height: auto;
	position: relative;
	opacity: 0.2;
}

.sub_steel1_box2 ul li *{
	word-break: keep-all;
	text-align: center;
}
.sub_steel1_box2 ul li span{
	width: 100px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	background-color: #0076CF;
	color: #fff;
	text-align: center;
	margin-bottom: 30px;
}
.sub_steel1_box2 ul li img{
	display: block;
	width: 300px;
	height: 200px;
	margin: 30px 0 20px;
}
.sub_steel1_box2 ul li em{
	font-size: 18px;
	color: rgba(255,255,255,0.5);
}
.sub_steel1_box2 ul li p{
	font-size: 1.4em;
	font-weight: 700;
	color:#fff;
	margin:15px 0 5px;
}
.sub_steel1_box2 ul li b{
	font-size: 1em;
	color: rgba(255,255,255,0.8);
} 


.sub_steel1_box2 ul::before{
	display: block;
	content: '';
	position: absolute;
	left:180px;
	top:-35px;
	width: calc(100% + 116px);
	height: 1px;
	border-bottom: rgba(255,255,255,0.5) dashed 1px;
}
.sub_steel1_box2 ul:nth-of-type(2):before{
	left:unset;
	width: calc(100% + 176px);
	right: 180px;
}

.sub_steel1_box2 ul{
	position: relative;
}
.sub_steel1_box2 ul:nth-of-type(1){
	width: 100%;
	max-width: 1780px;
	margin-bottom: 220px;
}
.sub_steel1_box2 ul:nth-of-type(2){
	width: 100%;
	max-width: 1420px;
}

.sub_steel1_box2 ul li.on::before{
	display: block;
	content: '';
	position: absolute;
	top:-35px;
	left:180px;
	/* transform: translate(50%, 0); */
	width: 466px;
	height: 1px;
	background-color: #0076CF;
}
.sub_steel1_box2 ul li::after{
	display: block;
	content: '';
	position: absolute;
	top:-40px;
	left:50%;
	transform: translate(-50%, 0);
	background-color: #999;
	width: 10px;
	height: 10px;
	border-radius: 100%;
}
.sub_steel1_box2 ul li.on::after{
	background-color:#0076CF ;
}
.sub_steel1_box2 ul li.on.active::after{
	top:-42.5px;
	width: 18px;
	height: 18px;
	background-color: #fff;
	border:4px solid #0076CF;
	box-shadow: 0px 0 3px 4px rgba(255,255,255,0.2);
}

.sub_steel1_box2 ul li.on{
	opacity: 1;
	animation: Up 0.25s 1 linear;
}
@keyframes Up{
    0%{
		opacity: 0;
		bottom:-10px
	}
    100%{
		opacity: 1;
		bottom:0;
	}
}

.sub_steel1_box2 ul li.on::before{
	animation: linerW 0.25s 1 linear;
}
@keyframes linerW{
    0%{
		width: 0;
	}
    100%{
		width: 466px;
	}
}
.sub_steel1_box2 ul:nth-of-type(2) li.on::before{
	width: 525px;
	left: unset;
    left: -356px;
}


/* sub_steel2 */
.sub_steel2_box1{
	display: flex;
	width: 100%;
	max-width: 1360px;
	margin:0 auto;
    justify-content: space-between;
	align-items: center;
}
.sub_steel2_box1 > div:nth-of-type(1) span{
	font-size: 24px;
	font-weight: 600;
	color: #0076CF;
}
.sub_steel2_box1 > div:nth-of-type(1) p{
	font-size: 38px;
	font-weight: 700;
	margin-top: 30px;
	margin-right: 80px;
	word-break: keep-all;
}

.sub_steel2_box1 > div:nth-of-type(2)::before{
	display: block;
	content: '';
	position: absolute;
	left:0;
	top:50%;
	transform: translate(0, -50%);
	width: 1px;
	height: 95px;
	background-color: rgba(255,255,255,0.2);
}
.sub_steel2_box1 > div:nth-of-type(2){
	padding-left: 80px;
	position: relative;
	max-width: 800px;
	word-break: keep-all;
}
.sub_steel2_box1 > div:nth-of-type(2) p{
	font-size: 20px;
	color: rgba(255,255,255,0.8);
}

.sub_steel2_box2{
	margin-top: 150px;
	padding-bottom: 20px;
	position: relative;
}
.sub_steel2_box2 table{
	width: 100%;
	position: relative;
	z-index: 1;
}
.sub_steel2_box2 table tr th,
.sub_steel2_box2 table tr td{
	border-bottom: 1px solid rgba(255,255,255,0.05);
	height: 60px;
	text-align: center;
	font-size: 1em;
	word-break: keep-all;
}
.sub_steel2_box2 table tr:nth-of-type(1) td img{
	display: block;
	margin:0 auto;
	margin-bottom: 15px;
}
.sub_steel2_box2 table tr td p{
	font-size: 24px;
	font-weight: 600;
}
.sub_steel2_box2 table tr:nth-of-type(1) th,
.sub_steel2_box2 table tr:nth-of-type(1) td{
	border-bottom: 1px solid rgba(255,255,255,0.2);
	padding:40px 0;
}
.sub_steel2_box2 table tr:last-child th,
.sub_steel2_box2 table tr:last-child td{
	border-bottom: none;
}
/*
.sub_steel2_box2 table tr:not(:nth-of-type(1)) td{
	background-image: url(../img/sub/icon_good.png);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: auto;
}
*/
.sub_steel2_box2 table .bad{
	color: rgba(255,255,255,0.25);
	/* background-image: url(../img/sub/icon_bad.png) !important; */
}
.sub_steel2_box2 table tr:not(:nth-of-type(1)) td img{
	display: inline-block;
	vertical-align: baseline;
	margin-left: 5px;
}

.sub_steel2_box2 table .bad img{
	vertical-align: text-bottom !important;
}

.sub_steel2_box2 table td{
	width: 410px;
}

.steel2_dummy{
	display: block;
	content: '';
	position: absolute;
	left:calc(100% - 1230px);
	top:0;
	z-index: 0;
	width: 410px;
	height: 100%;
	background-color: rgba(255,255,255,0.05);
	border-radius: 20px;
	border:3px solid #0076CF;
}



/* sub_box1 */

.sub_box1 .sub_steel1_box1{
	display: flex;
}
.sub_box1 .sub_steel1_box1 > div:nth-of-type(1) span{
	font-size: 24px;
	font-weight: 700;
	color: #0076CF;
}
.sub_box1 .sub_steel1_box1 > div:nth-of-type(1) p{
	font-size: 38px;
	font-weight: 700;
	margin: 30px 0 50px;
}
.sub_box1 .sub_steel1_box1 > div:nth-of-type(1) ul{
	display: flex;
}
.sub_box1 .sub_steel1_box1 > div:nth-of-type(1) ul li{
	margin-right: 15px;
}
.sub_box1 .sub_steel1_box1 > div:nth-of-type(1) ul li:last-child{
	margin-right: 0;
}


/* sub_steel3 */
.sub_steel3 ul{
	display: flex;
	flex-direction: row;
    flex-wrap: wrap;
}
.sub_steel3 ul li{
	width: calc(100% / 3 - 60px);
	margin-right: 80px;
	margin-bottom: 80px;
}
.sub_steel3 ul li:nth-of-type(3n){
	margin-right: 0;
}
.sub_steel3 ul li a{
	display: flex;
	flex-direction: column;
    align-items: center;
	position: relative;
	padding-bottom: 60px;
}
.steel3_dummy{
	display: block;
	content: '';
	width: 100%;
	height: 280px;
	position: absolute;
	bottom:0;
	left:0;
	background-color: rgba(255,255,255,0.1);
	border-radius: 210px 210px 0 0;
	z-index: 0;
}
.sub_steel3 ul li a *:not(.steel3_dummy){
	z-index: 1;
}

.sub_steel3 ul li.badge a::after{
	display: block;
	content: '';
	width: 80px;
	height: 80px;
	position: absolute;
	top:20px;
	right: 20px;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 3;
}
.sub_steel3 ul li.badge_recycle a::after{
	background-image: url(../img/sub/badge_recycle.png);
}
.sub_steel3 ul li.badge_only a::after{
	background-image: url(../img/sub/badge_only.png);
}
.sub_steel3 ul li a img{
	display: block;
}
.sub_steel3 ul li a h6{
	font-size: 1.6em;
	font-weight: 700;
	margin: 20px 0 10px;
}
.sub_steel3 ul li a p{
	font-size: 16px;
	color:#999;
}

.sub_steel3 ul li a::before{
	display: block;
	content: '＋';
	font-size: 40px;
	color: #fff;
	position: absolute;
	left:50%;
	transform: translate(-50%, 0);
	bottom:40px;
	opacity: 0;
}
.sub_steel3 ul li a:hover{
	position: relative;
	transition-duration: 0.5s;
	padding-bottom: 100px;
}
.sub_steel3 ul li a:hover::before{
	display: block;
	color: #0076CF;
	opacity: 1;
	transition-duration: 0.5s;
	z-index: 2;
	transform: translate(-50%, 0) rotate(360deg);
}
.sub_steel3 ul li a:hover::after{
	top:0;
	transition-duration: 0.5s;
}
.sub_steel3 ul li a:hover .steel3_dummy{
	height: 320px;
	background-color: #fff;
	transition-duration: 0.5s;
}
.sub_steel3 ul li a:hover img{
	margin-top: -40px;
	transition-duration: 0.5s;
}
.sub_steel3 ul li a:hover h6{
	color: #0076CF;
	transition-duration: 0.5s;
}


/* .sub_ctf */
.sub_ctf{
	margin-bottom: 80px;
}

/**/
@media (max-width: 1620px){

	.sub_rnd_box2 > ul > li ul{
		padding:0 50px;
	}

}

@media (max-width: 1419px){

	#subVisual{
		padding:0 2%;
	}
	#subVisual h2{
		font-size: 3.6em;
	}

	.sub_tit_box{
		font-size: 2.4em;
	}

	.sub_com > img{
		max-width: 100% !important;
	}

	.rnd_dummy{
		max-width: 100%;
	}
	.rnd_dummy::before,
	.rnd_dummy::after{
		max-width: 100%;
	}
	.rnd_dummy::before,
	.rnd_dummy::after{
		background-size: contain;
	}
	
	.sub_rnd_box1 ul li p{
		font-size: 3em;
	}

	.sub_rnd_box2 > ul > li ul{
		padding:0 25px !important;
	}

}

@media (max-width: 1319px){

	.sub_com_box2 div img{
		width: 530px;
	}

	.his_left p{
		font-size: 2.4em;
	}

	.his_left img{
		width: 400px;
	}

	.sub_glo_box1 p.on a span, .sub_glo_box1 p:hover a span{
		display: none;
	}

	.sub_glo_box1 p:nth-of-type(1) a span{
		left: unset;
		right: -20px;
		transform: translate(100%, -50%);
	}

	.sub_glo_box1 p:nth-of-type(5) a span,
	.sub_glo_box1 p:nth-of-type(6) a span{
		right: unset;
		left: -20px;
		transform: translate(-100%, -50%);
	}

	.sub_steel1_box2 ul li{
		width: calc((100% / 4));
	}

	.sub_steel2_box2 table{
		margin:0 auto;
		width: 1000px;
	}
	.sub_steel2_box2 table th{
		width: 130px;
	}
	.sub_steel2_box2 table td{
		width: 290px;
	}
	.steel2_dummy{
		width: 290px;
		left:calc(50% - 225px);
		transform: translate(-50%, 0);
	}
	.sub_steel2_box2 table tr th, .sub_steel2_box2 table tr td{
		font-size: 1em;
	}

}

@media (max-width: 1119px){

	#subVisual{
		height: 450px;
	}
	#subVisual .container{
		margin-top: 100px;
	}
	#subVisual h2{
		font-size: 3.0em;
	}	

	.sub_tit_box{
		font-size: 1.8em;
	}

	.sub_ceo > ul{
		width: 100%;
	}
	.sub_ceo > ul li{
		width: calc(100% / 5 + 30px);
	}

	.sub_ceo_box1{
		flex-direction: column;
		width: 100%;
	}
	.sub_ceo_box1 img{
		width: 100%;
		margin-right: 0;
	}
	.sub_ceo_box1 > div{
		width: 100%;
		margin-top: 60px;
	}
	
	.sub_com_box2 div p{
		font-size: 1.2em;
	}
	.sub_com_box2 div p br{
		display: none;
	}
	.sub_com_box2 div img{
		width: 40%;
		margin-left: 20px;
	}
	.sub_com_box2 div:last-child img{
		margin-left: unset;
		margin-right: 20px;
	}

	.sub_his_box1{
		height: 200px;
	}

	.his_left p{
		font-size: 2.0em;
	}
	.his_right .yr h4{
		font-size: 1.8em;
	}

	.glo_view{
		padding:40px;
	}
	.glo_view > div:nth-of-type(2) > ul > li ul{
		flex-direction: column;
	}

	.glo_view > div:nth-of-type(1) h4{
		font-size: 1.8em;
	}
	.glo_view > div:nth-of-type(2) li{
		font-size: 1.0em;
	}

	.gall_li:nth-of-type(3n){
		margin-right: unset;
	}
	.gall_li{
		width: calc(100% / 2 - 15px) !important;
		height: 280px;
		padding: 0 !important;
		background-color: rgba(255,255,255,0.05);
		opacity: 0.8;
		margin: 0 30px 30px 0 !important;
	}
	.gall_li:nth-of-type(2n){
		margin-right: 0 !important;
	}
	.gall_row .box_clear{
		clear: unset !important;
	}

	.sub_rnd_box1 ul li{
		margin-bottom: 15px;
	}
	.sub_rnd_box1 ul li p{
		font-size: 2em;
	}
	.sub_rnd_box1 ul li img{
		width: 250px !important;
		height: 90px !important;
	}
	.sub_rnd_box2 ul{
		flex-direction: column;
	}
	.sub_rnd_box2 ul li{
		width: 100%;
		height: fit-content;
		padding:50px 0;
	}

	.sub_rnd_box2 > ul > li ul{
		flex-direction: row;
		align-items: center;
		width: 100%;

		transition-duration: 0.75s;
		position: relative;
		opacity: 1;
		z-index: 2;
		top:unset;
		height: fit-content;
	}
	.sub_rnd_box2 > ul > li::before{
		opacity: 1;
		z-index: 1;
		background-color: rgba(0,0,0,0.5);
	}
	.sub_rnd_box2 > ul > li ul li{
		width: calc(100% / 6 - 10px);
		margin:unset;
		margin-right: 10px;
		padding:10px;
	}
	.sub_rnd_box2 > ul > li ul li:last-child{
		margin-right: 0;
	}

	.sub_steel1_box1{
		flex-direction: column;	
	}
	.sub_steel1_box1 > p{
		font-size: 2em;
		margin-bottom: 30px;
		text-align: center;
		word-break: keep-all;
	}
	.sub_steel1_box1 > p br{
		display: none;
	}

	.sub_steel1_box2 ul li{
		width: calc(100% / 2);
		opacity: 1;
	}

	.sub_steel1_box2 ul::before,
	.sub_steel1_box2 ul li::after,
	.sub_steel1_box2 ul li.on::before,
	.sub_steel1_box2 ul li.on::after{
		display: none;
	}

	.sub_steel1_box2 ul li span{
		margin-bottom: 0;
	}

	.sub_steel1_box2 ul:nth-of-type(1){
		margin-bottom: 0;
	}
	.sub_steel1_box2 ul li{
		margin-top: 30px;
	}


	.sub_steel2_box1{
		flex-direction: column;
	}
	.sub_steel2_box1 > div:nth-of-type(2)::before{
		display: none;
	}

	.sub_steel2_box1 > div:nth-of-type(1){
		text-align: center;
	}
	.sub_steel2_box1 > div:nth-of-type(2){
		padding-left: 0;
		margin-top: 30px;
		text-align: center;
		word-break: keep-all;
	}
	.sub_steel2_box1 > div:nth-of-type(1) p{
		margin-right: 0;
	}
	.sub_steel2_box1 > div:nth-of-type(2) p{
		word-break: keep-all;
	}
	.sub_steel2_box1 > div:nth-of-type(2) br{
		display: none;
	}

	.sub_steel2{
		overflow-x: scroll;
	}
	.sub_steel2_box2{
		width: 850px;
	}
	.sub_steel2_box2 table{
		width: 100%;
	}

	.sub_steel2_box2 table th{
		width: 100px;
	}
	.sub_steel2_box2 table tr td{
		width: 250px;
	}
	.steel2_dummy{
		transform: unset;
		left:100px;
		width: 250px;
	}

	.sub_steel2_box2 table tr td p{
		font-size:1.4em;
	}
	.sub_steel2_box2 table tr:nth-of-type(1) td img{
		width: 120px;
		height: auto;
	}
	
	.sub_steel3 ul li:nth-of-type(3n){
		margin-right: unset;
	}
	.sub_steel3 ul li{
		width: calc(100% / 2 - 30px);
		margin-right: 30px !important;
	}
	.sub_steel3 ul li:nth-of-type(2){
		margin-right: 0;
	}


	.sub_box1 .sub_steel1_box1{
		text-align: center;
	}
	.sub_box1 .sub_steel1_box1 p{
		word-break: keep-all;
	}
	.sub_box1 .sub_steel1_box1 br{
		display: none;
	}
	.sub_box1 .sub_steel1_box1 > div:nth-of-type(1) ul{
		justify-content: center;
	}

}



@media (max-width: 999px){

	#subVisual{
		height: 400px;
	}
	#subVisual h2{
		text-align: center;
		padding-top: 50px;
		font-size: 2.4em;
	}

	.sub_tit_box{
		font-size: 1.6em;
		word-break: keep-all;
	}
	.sub_ceo > ul li img{
		height: 40px !important;
	}
	.sub_ceo > ul li{
		font-size: 1em;
	}
	.sub_ceo_box1 > div p{
		font-size: 1em;
	}

	.sub_com > img{
		margin-left: unset;
	}

	.his_depth li{
		margin-right: 30px;
	}
	.his_depth li a{
		width: fit-content;
	}
	
	.sub_his_box1{
		background-size: inherit;
	}

	.sub_his_box2{
		padding-left: 10px;
	}
	.sub_his_box2 > div{
		flex-direction: column;
		margin-bottom: 60px;
	}
	.sub_his_box2 > div > div{
		width: 100%;
	}

	.sub_his_box2 > div:nth-of-type(1) .yr:last-child span,
	.sub_his_box2 > div:nth-of-type(1) .yr:last-child.on span.line_blue,
	.sub_his_box2 > div:nth-of-type(3) .his_right > div:last-child span,
	.sub_his_box2 > div:nth-of-type(2) .his_right > div:last-child span.line_blue,
	.sub_his_box2 > div:nth-of-type(2) .his_right > div:last-child span,
	.sub_his_box2 > div:nth-of-type(2) .his_right > div:last-child span.line_blue{
		height: 100% !important;
	}
	
	.his_left p{
		margin-bottom: 10px;
		font-size: 1.6em;
	}
	.sub_his_box2 > div > div{
		padding-top: 30px;
	}
	.his_right .yr h4{
		font-size: 1.4em;
	}

	.sub_his_box2 > div:nth-of-type(1) .his_right .yr h4::before{
		top:5px;
	}
	span.line_gray, span.line_blue{
		left: 1px;
	}

	.his_right .yr ul{
		padding-top: 0;
	}
	.his_right .yr ul li p{
		font-size: 1.0em;
		word-break: keep-all;
	}

	.sub_glo_box1 img{
		width: 750px;
		margin:0 auto;
	}

	.sub_glo_box1 p:nth-of-type(1) {
		left: 34px;
		bottom: 98px;
	}
	.sub_glo_box1 p:nth-of-type(2) {
		left: 148px;
		bottom: 111px;
	}
	.sub_glo_box1 p:nth-of-type(3) {
		left: 27px;
		bottom: 197px;
	}
	.sub_glo_box1 p:nth-of-type(4) {
		left: 68px;
		bottom: 238px;
	}
	.sub_glo_box1 p:nth-of-type(5) {
		right: 139px;
		top: 168px;
	}
	.sub_glo_box1 p:nth-of-type(6) {
		right: 188px;
		top: 216px;
	}




	.sub_glo_box1 p{
		opacity: 1;
	}

	.glo_view{
		flex-direction: column;
	}
	.glo_view > div:nth-of-type(1) ul{
		margin-top: 10px;
		margin-bottom: 30px;
	}

	.glo_view > div:nth-of-type(2) > ul > li {
		flex-direction: column;
		word-break: keep-all;
	}
	.glo_view > div:nth-of-type(2) li b,
	.glo_view > div:nth-of-type(2) > ul > li ul li{
		margin-bottom: 10px;
		margin-right: 0;
	}

	.glo_view > div:nth-of-type(1){
		width: fit-content;
	}
	.glo_view > div:nth-of-type(2){
		width: 100%;
	}


	#bo_gall .gall_wrap{
		flex-direction: column;
	}
	#bo_gall .gall_img{
		width: 100%;
	}
	#bo_gall .gall_text_href{
		width: 100%;
	}
	#bo_gall .gall_text_href .bo_tit *{
		width: 100%;
		text-align: center;
	}
	
	.gall_li{
		height: 450px;
	}

	.sub_rnd > img{
		top:50px;
		opacity: 1;
	}

	.rnd_dummy::before, .rnd_dummy::after{
		right: unset;
		left:50%;
		transform: translate(-50%, 0);
	}
	.rnd_dummy::before{
		width: 100%;
	}
	 .rnd_dummy::after{
		width: 75%;
	 }

	 .sub_rnd_box1 ul li{
		height: fit-content;
	 }
	 .sub_rnd_box1 ul li img{
		display: none;
	 }
	 .sub_rnd_box1 ul li p{
		font-size: 1.6em;
	 }

	 .sub_rnd_box2 > ul > li h4{
		font-size: 1.6em;
	 }
	 .sub_rnd_box2 > ul > li ul li{
		font-size: 1.0em;
		word-break: keep-all;
	 }

	 .sub_rnd_box2 > ul > li ul li {
		width: calc(100% / 3 - 10px);
		margin-bottom: 10px;
	}
	
}



@media (max-width: 799px){

	#subVisual{
		height: 300px;
	}
	#subVisual h2{
		font-size: 2.0em;
	}

	.sub_ceo > img{
		width: 125px;
	}
	.sub_tit_box{
		font-size: 1.4em;
	}
	.sub_tit_box br{
		display: none;
	}

	.sub_ceo > ul li img{
		height: 30px !important;
	}
	.sub_com_box2 div p{
		word-break: keep-all;
	}

	.his_depth li{
		margin-right: 10px;
	}
	.his_depth li:hover{
		color: unset;
		font-weight: unset;
		border-bottom: none;
		transition-duration: unset;
	}
	.his_depth li a{
		font-size: 0.9em;
	}

	.sub_glo_box1{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 60px;
	}
	.sub_glo_box1 img{
		margin-bottom: 30px;
	}
	.sub_glo_box1 p{
		position: unset;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.sub_glo_box1 p a::before{
		display: none;
	}
	.glo_view{
		padding:20px 30px;
	}
	.glo_view > div:nth-of-type(1) h4{
		font-size: 1.4em;
	}
	.glo_view > div:nth-of-type(1) ul li{
		font-size: 1.0em;
	}
	.glo_view > div:nth-of-type(2) > ul > li{
		margin-bottom: 20px;
	}

	#bo_gall .bo_tit{
		padding:0 15px;
	}
	#bo_gall .gall_text_href .bo_tit p,
	#bo_gall .gall_text_href .bo_tit span{
		font-size: 0.8em;
	}
	#bo_gall .gall_text_href .bo_tit h6{
		font-size: 0.9em;
	}

	.rnd_dummy{
		height: 250px;
	}
	.sub_rnd > img{
		width: 125px;
		height: auto;
		top:15px;
	}
	.sub_rnd_box1 ul li{
		margin-bottom: 5px;
	}
	.sub_rnd_box2{
		margin-top: 60px;
	}

	.sub_ceo > img{
		height: auto;
	}
	
	.sub_steel1_box1 > p{
		font-size: 1.6em;
		line-height: unset;
	}
	.sub_steel1_box1 > ul{
		flex-direction: column;
	}
	.sub_steel1_box1 > ul li:nth-of-type(1){
		margin-right: 0;
		padding-right: 0;
		margin-bottom: 30px;
	}
	.sub_steel1_box1 > ul li:nth-of-type(1)::before{
		display: none;
	}
	.sub_steel1_box1 > ul li p{
		margin-bottom: 10px;
	}
	.sub_steel1_box1 > ul li p b{
		font-size: 1.4em;
	}
	.sub_steel1_box1 > ul li span{
		font-size: 1.2em;
	}

	.sub_steel1_box2{
		padding-top: 60px;
	}
	.sub_steel1_box2 ul li{
		width:calc(100% / 2 - 10px);
	}
	.sub_steel1_box2 ul li img{
		width: 75%;
		height: auto;
	}
	.sub_steel1_box2 ul li em,
	.sub_steel1_box2 ul li b{
		text-align: center;
		font-size: 0.9em;
		word-break: keep-all;
	}
	.sub_steel1_box2 ul li p{
		text-align: center;
		font-size: 1.0em;
		word-break: keep-all;
	}
	.sub_steel1_box2 ul li span{
		font-size: 0.8em;
		display: flex;
		align-items: center;
		justify-content: center;
		width: fit-content;
		height: fit-content;
		line-height: unset;
		padding:10px 10px;
	}

	.sub_steel2_box1 > div:nth-of-type(1) p{
		font-size: 1.6em;
		word-break: keep-all;
	}
	.sub_steel2_box1 > div:nth-of-type(2) p{
		font-size: 1em;
	}
	.sub_steel2_box2{
		margin-top: 60px;
	}

	.sub_steel3 ul li{
		width: calc(100% / 2 - 15px);
		margin-bottom: 30px;
		height: 300px;
	}
	.sub_steel3 ul li:nth-of-type(2n){
		margin-right: 0 !important;
	}
	.steel3_dummy{
		height: 300px;
		bottom:unset;
	}
	.sub_steel3 ul li.badge a::after{
		width: 50px;
		height: 50px;
		top:10px;
		right:10px;
	}
	.sub_steel3 ul li a img{
		margin-top: 30px;
	}
	.sub_steel3 ul li a h6,
	.sub_steel3 ul li a p{
		text-align: center;
		font-size: 1em;
		word-break: keep-all;
		padding:0 10px;
	}

	
	.sub_box1 .sub_steel1_box1 > div:nth-of-type(1) p{
		font-size: 1.6em;
	}

	.sub_ceo > ul {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.sub_ceo > ul li{
		width: calc(100% / 3 - 10px);
		margin:5px;
	}

	.sub_com_box2 div{
		flex-direction: column;
	}
	.sub_com_box2 div:nth-of-type(2){
		flex-direction: column-reverse;
	}
	.sub_com_box2 div img{
		width: 100%;
		margin:15px auto;
	}

	.his_depth{
		flex-direction: column;
	}
	.his_depth li{
		margin-bottom: 10px;
	}
	.his_depth li:hover, .his_depth li.on{
		border-bottom: none;
	}

	.glo_view{
		padding:40px 30px;
	}

	.sub_steel1_box2 ul li{
		padding:0 10px
	}
	.sub_steel1_box2 ul li em, .sub_steel1_box2 ul li b{
		font-weight: 300;
		font-size: 0.8em;
	}

	.sub_steel1_box1 > p span{
		margin:0 5px;
	}
	.sub_steel2{
		overflow-x: unset;
	}
	.sub_steel2_box2{
		width: 100%;
		overflow-x: scroll;
	}
	.sub_steel2_box2 table{
		width: 900px;
	}
	.sub_steel2_box2 table th{
		width: 150px;
	}
	.steel2_dummy{
		left:150px;
	}

	.sub_steel3 ul li a:hover .steel3_dummy{
		height: 310px;
	}

}


/* ----------------------------------- 241126 물류 및 포장 페이지 추가 ----------------------------------- */
.stepWrap {position: relative; width: 100vw; left: 50%;	transform: translate(-50%, 0); margin-top: 150px; margin-bottom:180px; display: flex; flex-direction: column; align-items: center; gap:180px;}
.stepSlide ul {display: flex;flex-direction: row;justify-content: center;position:relative;gap: 185px;margin: 0 auto;}
.stepSlide:nth-child(1) ul{width:100%; max-width:1780px; gap:120px;}
.stepSlide:nth-child(2) ul{width:100%; max-width:1420px;}
.stepSlide ul::before{display: block;content: '';position: absolute;left: 175px;top:-35px;width: calc(100% + 50vw - 890px);height: 1px;border-bottom: rgba(255,255,255,0.5) dashed 1px;}
.stepSlide:nth-child(2) ul::before{left:unset;width: calc(100% + 50vw - 710px);right: 175px;}

.stepSlide ul li {display:flex; flex-direction: column; align-items: center; width: 350px; height: auto; position: relative; opacity: 0.2; text-align:center; word-break: keep-all;}
.stepSlide ul li::before{display: block;content: '';position: absolute;top:-35px;left:calc(50% - 5px);width: calc(100% + 185px);height: 1px;background-color: #0076CF;}
.stepSlide ul li::after{display: block;	content: ''; position: absolute; top:-40px;	left:50%; transform: translate(-50%, 0); background-color: #999; width: 10px; height: 10px; border-radius: 100%;}
.stepSlide:nth-child(1) ul li::before {width:calc(100% + 120px);}
.stepSlide:nth-child(1) ul li:last-child::before {width: calc(100% + 50vw - 890px);}
.stepSlide:nth-child(2) ul li::before{width: calc(100% + 185px);right: calc(50% - 5px);left: unset;}
.stepSlide:nth-child(2) ul li:first-child::before {width: calc(100% + 50vw - 710px);}
.stepSlide ul li::after{top:-43px; width: 18px; height: 18px; background-color: #fff; border:4px solid #0076CF; box-shadow: 0px 0 3px 4px rgba(255,255,255,0.2);}
		
.stepSlide ul li span {width: 100px; height: 30px; line-height: 30px; border-radius: 15px; background-color: #0076CF; color: #fff; text-align: center; margin-bottom: 30px; font-family: 'Montserrat', sans-serif; font-weight: 500;}
.stepSlide ul li img {display: block; width:100%; max-width: 300px !important; height: auto; margin: 30px 0 20px;}
.stepSlide ul li em {font-size: 18px; color: rgba(255,255,255,0.5);}
.stepSlide ul li p {font-size: 22px;font-weight: 700;color:#fff;margin:15px 0 10px; word-break:keep-all;}
.stepSlide ul li b {font-size: 16px;color: rgba(255,255,255,0.8); word-break:keep-all;} 


@keyframes fadeIn{ 0%{opacity: 0.2;} 100%{opacity: 1;} }
.stepSlide.on ul li{animation: fadeIn .3s forwards;}
.stepSlide.on ul li::before {animation: linerW .3s linear;}
.stepSlide.on ul li:nth-child(2),
.stepSlide.on ul li:nth-child(2)::before {animation-delay:.5s;}
.stepSlide.on ul li:nth-child(3),
.stepSlide.on ul li:nth-child(3)::before{animation-delay:1s;}
.stepSlide.on ul li:nth-child(4),
.stepSlide.on ul li:nth-child(4)::before {animation-delay:1.5s;}
	
	@media screen and (max-width:1919px) {
		.stepSlide ul {gap: 5vw !important;}
		.stepSlide ul li {}
		.stepSlide:nth-child(1) ul li::before {width:calc(100% + 5vw);}
		.stepSlide:nth-child(2) ul li::before{width: calc(100% + 5vw);}
	}
	@media screen and (max-width:1599px) {
		.stepSlide ul li {width: 20vw;}
		.stepSlide ul::before{left: 10vw;width:calc(100% - 7.5vw);!;!i;!;}
		.stepSlide:nth-child(2) ul::before{right:10vw;width: calc(100% + 5vw);}
		.stepSlide ul li::before {width:calc(100% + 5vw) !important;}
		.stepSlide:nth-child(1) ul li:last-child::before {width: calc(50% + 3vw) !important;}
		.stepSlide:nth-child(2) ul li:first-child::before {width: calc(50% + 16vw) !important;}
	}
	@media screen and (max-width:1199px) {
		.stepSlide ul li span {}
		.stepSlide ul li img {margin:0 0 20px;}
		.stepSlide ul li em {font-size: 14px;}
		.stepSlide ul li p {font-size: 20px; margin:10px 0 8px;}
		.stepSlide ul li b {font-size: 16px;}
	}
	@media screen and (max-width:999px) {
		.stepSlide ul li{opacity:1;}
	}
	@media screen and (max-width:799px) {
		.stepSlide ul:before,
		.stepSlide ul li:before,
		.stepSlide ul li:after {display:none;}
		.stepWrap {gap:80px;}
		.stepSlide {width:100%;}
		.stepSlide ul {flex-wrap:wrap; gap:80px 2vw !important; justify-content:flex-start;}
		.stepSlide ul li {width:calc(50% - 1vw);}
	}
	@media screen and (max-width:599px) {
		.stepWrap {gap:60px;margin-top:100px;margin-bottom: 80px;}
		.stepSlide ul {padding:0 2%; gap:60px 2vw !important;}
		.stepSlide ul li span {font-size: 13px;width: 80px;height: 26px;line-height: 26px;margin-bottom: 20px;}
		.stepSlide ul li em {font-size: 14px;}
		.stepSlide ul li p {font-size: 18px; margin:8px 0 5px;}
		.stepSlide ul li b {font-size: 15px;}
	}



.sub_packaging {}
.sub_packaging .sec01 {display:flex;justify-content:space-between;align-items: center;}
.sub_packaging .sec01 .txtWrap {letter-spacing:-.5px;}
.sub_packaging .sec01 .txtWrap .subTit {font-size:24px; font-weight:700; color:#0076CF;}
.sub_packaging .sec01 .txtWrap .tit {margin:26px 0 25px; font-size:45px; font-weight:700;}
.sub_packaging .sec01 .txtWrap p {margin-bottom:20px; font-size:20px; font-weight:200; color:rgba(255,255,255,0.8); line-height:1.4; word-break:keep-all;}

.sub_packaging .sec01 .iconList {padding:30px;border:2px solid rgba(0,118,207,0.2);border-radius:500px;display:flex;}
.sub_packaging .sec01 .iconList li {width:240px;height:240px;border-radius:50%;display:flex;flex-direction:column;gap:10px;font-size: 20px;justify-content:center;align-items:center;text-align:center;flex-shrink: 0;letter-spacing:-.5px;}
.sub_packaging .sec01 .iconList li p {word-break:keep-all;}
.sub_packaging .sec01 .iconList li:not(:first-child) {margin-left:-20px;}
.sub_packaging .sec01 .iconList li:nth-child(1) {background:rgba(0,118,207,0.85); animation-delay:.2s;}
.sub_packaging .sec01 .iconList li:nth-child(2) {background:rgba(0,107,195,0.85); animation-delay:.4s;}
.sub_packaging .sec01 .iconList li:nth-child(3) {background:rgba(0,97,183,0.85); animation-delay:.6s;}
.sub_packaging .sec01 .iconList li .icon {width:60px; height:60px;}

.sub_packaging .sec02 .stepSlide ul {gap:185px;}
.sub_packaging .sec02 .stepSlide:nth-child(1) ul{max-width: 1420px;}
.sub_packaging .sec02 .stepSlide:nth-child(2) ul{max-width: 885px;}
.sub_packaging .sec02 .stepSlide:nth-child(2) ul::before {width: calc(100% + 50vw - 442.5px);}
.sub_packaging .sec02 .stepSlide ul li::before {width:calc(100% + 185px);}
.sub_packaging .sec02 .stepSlide:nth-child(2) ul li::before{}
.sub_packaging .sec02 .stepSlide:nth-child(2) ul li:first-child::before {width: calc(50% + 50vw - 442.5px);}
.sub_packaging .sec02 .stepSlide ul li.mob {display:none;}

.sub_packaging .sec03 {display:flex; gap:60px; margin:150px auto;}
.sub_packaging .sec03 img {width:calc(50% - 30px); height:auto;}

	@media screen and (max-width:1919px) {
		.sub_packaging .sec02 .stepSlide:nth-child(1) ul::before {width: calc(100% + 50vw - 525px - 5vw);}
		.sub_packaging .sec02 .stepSlide:nth-child(2) ul::before {width: calc(100% + 50vw - 350px - 2.5vw);}
		.sub_packaging .sec02 .stepSlide ul li::before {width: calc(100% + 5vw);}
		.sub_packaging .sec02 .stepSlide:nth-child(1) ul li:nth-child(3)::before {width: calc(100% + 45vw - 525px);}
		.sub_packaging .sec02 .stepSlide:nth-child(2) ul li:first-child::before {width: calc(100% + 47.5vw - 350px);}
	}
	@media screen and (max-width:1599px) {

		.sub_packaging .sec01 .iconList {padding:20px;}
		.sub_packaging .sec01 .iconList li {width:220px;height:220px;gap:10px;font-size:18px;}
		.sub_packaging .sec01 .iconList li:not(:first-child) {margin-left:-25px;}
		
		.sub_packaging .sec02 .stepSlide:nth-child(1) ul::before {width: calc(100% + 5vw);}
		.sub_packaging .sec02 .stepSlide:nth-child(2) ul::before {width: calc(100% + 17.5vw);}
		.sub_packaging .sec02 .stepSlide:nth-child(1) ul li:nth-child(3)::before {width: calc(50% + 16vw) !important;}
		.sub_packaging .sec02 .stepSlide:nth-child(2) ul li:first-child::before {width: calc(50% + 28vw) !important;}

		.sub_packaging .sec03 {gap:2vw;}
		.sub_packaging .sec03 img {width:calc(50% - 1vw);}
	}
	@media screen and (max-width:1199px) {
		.sub_packaging .sec01 .txtWrap .subTit {font-size:22px;}
		.sub_packaging .sec01 .txtWrap .tit {font-size:40px;}
		.sub_packaging .sec01 .txtWrap p {font-size:18px;}

		.sub_packaging .sec01 .iconList {padding:15px;}
		.sub_packaging .sec01 .iconList li {gap:5px;font-size:18px; padding:30px;}
	}
	@media screen and (max-width:999px) {
		.sub_packaging .sec01 {flex-direction:column; align-items:center; text-align:center;}
		.sub_packaging .sec03 {margin:100px auto;}
	}
	@media screen and (max-width:799px) {
		.sub_packaging .sec01 .iconList li {width:30vw; height:30vw;}
		.sub_packaging .sec01 .iconList li:not(:first-child) {margin-left:-2vw;}
		
		.sub_packaging .sec02 .stepSlide ul li.mob {display:flex;}
		.sub_packaging .sec02 .stepSlide ul li.pc {display:none;}
	}
	@media screen and (max-width:599px) {
		.sub_packaging .sec01 .txtWrap .subTit {font-size:18px;}
		.sub_packaging .sec01 .txtWrap .tit {font-size:30px; margin:15px auto;}
		.sub_packaging .sec01 .txtWrap p {font-size:16px; margin-bottom:15px;}
		.sub_packaging .sec01 .iconList {padding:10px;}
		.sub_packaging .sec01 .iconList li {font-size:16px;}
		.sub_packaging .sec03 {margin:80px auto;}
	}
	@media screen and (max-width:499px) {
		.sub_packaging .sec01 .iconList {flex-direction:column; width:100%; border-radius:20px; gap:10px; border:none; padding:0;}
		.sub_packaging .sec01 .iconList li {width:100%; height:auto; border-radius:100px; flex-direction:row; padding:10px;}
		.sub_packaging .sec01 .iconList li:not(:first-child) {margin-left:0;}
	}


@keyframes flowLogo { 0% {transform: translateX(0);} 100% {transform: translateX(-50%);} }

.logoFlow {margin-top:80px;}
.logoFlow h5 {font-size:38px; text-align:center; font-weight:600; color:#fff; margin-bottom:60px;}
.logoFlow .logoSlider {width: max-content;}
.logoFlow .logoList {display:flex;justify-content:center;align-items:center;gap:100px;animation: flowLogo 17s linear infinite !important;}

	@media screen and (max-width:999px) {
		.logoFlow h5 {font-size:34px; margin-bottom:20px;}
		.logoFlow .logoList {gap:60px;}
	}

	@media screen and (max-width:599px) {
		.logoFlow .logoSlider {width:100%;}
		.logoFlow h5 {font-size:28px; margin-bottom:0;}
		.logoFlow .logoList {animation:none !important;gap: 0 30px;flex-wrap:wrap;justify-content: flex-start;width: 100%;}
		.logoFlow .logoList li {width:calc(100%/3 - 60px/3);}
		.logoFlow .logoList li:nth-child(n+15) {display:none;}
		.logoFlow .logoList img {max-width:100%;}
	}

	@media screen and (max-width:399px) {
		.logoFlow .logoList {gap: 0 20px;}
		.logoFlow .logoList li {width: calc(100%/2 - 20px/2);}
	}